Redux-saga persist with redux-toolkit, A non-serializable value was detected in an action, in the path: register

Question

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?

Answer 1

It should be middleware, not middleWare in your code.