I am using redux toolkit and I get this error:
serializableStateInvariantMiddleware.ts:197 A non-serializable value was detected in an action, in the path: `register`. Value: ƒ register(key) {
_pStore.dispatch({
type: _constants__WEBPACK_IMPORTED_MODULE_0__.REGISTER,
key: key
});
}
Take a look at the logic that dispatched this action: Object
(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)
(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)
I found some answers online that says that I have to disable serializableCheck by setting it to false, or to ignore some actions. For example, I tried this solution: I added the list of actions to ignore, but that did not solve my problem. Even setting ignoredPaths: ['register']
or serializableCheck: false
did not work.
This is my store now:
import { configureStore } from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import storage from "redux-persist/lib/storage";
import rootReducer from "./rootReducers";
import {
persistReducer,
persistStore,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from "redux-persist";
const sagaMiddleware = createSagaMiddleware();
const persistConfig = {
key: "root",
storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== "production",
middleWare: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
],
},
}).concat(sagaMiddleware),
});
export const persistor = persistStore(store);
export default store;
Am I doing something wrong?
It should be middleware
, not middleWare
in your code.