You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hello everyone,
I am working on a small project with only two reducers one to store group Info (only id) and one for map Info (more complex start point, endpoint, and other data will be added later)
I create my project using Vite
the code is in TypeScript and uses react framework and redux-toolkit
After adding redux-persist to my project I have an issue with non-serializable value for both reducers.
This is my store.ts code
import { configureStore } from "@reduxjs/toolkit";
//add the presisit
import { persistReducer, persistStore } from "redux-persist";
import storage from "redux-persist/lib/storage";
import groupInfoReducer from "../features/groupInfo/groupinfo-slice";
import mapInfoReducder from "../features/map/map-slice";
const groupInfoPersistConfig = {
key: "groupInfo",
storage,
};
const mapInfoPersistConfig = {
key: "mapInfo",
storage,
};
const persistedGroupInfoReducer = persistReducer(
groupInfoPersistConfig,
groupInfoReducer
);
const persistedMapInfoReducer = persistReducer(
mapInfoPersistConfig,
mapInfoReducder
);
export const store = configureStore({
reducer: {
groupInfo: persistedGroupInfoReducer,
mapInfo: persistedMapInfoReducer,
},
});
export const persistor = persistStore(store);
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
and this is my main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./app/store";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";
const persistor = persistStore(store);
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
</React.StrictMode>
);
I am new to redux (only my second project) and redux-persist.
The text was updated successfully, but these errors were encountered:
You need to also include the Thunk middleware, which will intercept and stop non-serializable values in action before they get to the reducer.
You can use the resource as a guide Log rocket
You need to also include the Thunk middleware, which will intercept and stop non-serializable values in action before they get to the reducer. You can use the resource as a guide Log rocket
if i use redux-toolkit that includes redux-thunk by default it not enough?
Hello everyone,
I am working on a small project with only two reducers one to store group Info (only id) and one for map Info (more complex start point, endpoint, and other data will be added later)
I create my project using Vite
the code is in TypeScript and uses react framework and redux-toolkit
After adding redux-persist to my project I have an issue with non-serializable value for both reducers.
This is my store.ts code
and this is my main.tsx
I am new to redux (only my second project) and redux-persist.
The text was updated successfully, but these errors were encountered: