how to solve getdefaultMiddleware errors

Viewed 20

I am using redux-presist ,but i got follwing error when don't set any middleware

  serializableStateInvariantMiddleware.ts:194 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
    });

when i tried solve that by using middleware where i used getdefault middleware it gives the following error

Object is of type 'unknown'.
    34 |     reducer:{
    35 |         app:presistedReducer,
  > 36 |         middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
       |                                               ^^^^^^^^^^^^^^^^^^^^
    37 |     },
    38 |
    39 | })
  } 
Take a look at the logic that dispatched this action:  {type: 'persist/PERSIST', register: ƒ, rehydrate: ƒ} 

i even tried again but this error

Uncaught TypeError: getDefaultMiddleware is not a function

here is my code store.ts

import { configureStore} from "@reduxjs/toolkit";
import storage from 'redux-persist/lib/storage';
import { combineReducers } from 'redux';
import { persistReducer,persistStore } from 'redux-persist';
import FavouriteReducer from "./FavouriteSlice";
import ProductReducer from './ProductSlice'
import ActionReducer from "./ActionSlice";
import {
    FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER,
  } from 'redux-persist'

const reducers= combineReducers({
    action:ActionReducer,
    favourite:FavouriteReducer,
    product:ProductReducer
})


const persistConfig = {
    key: 'root',
    version: 1,
    storage,
}


const presistedReducer=persistReducer(persistConfig,reducers)
export const store = configureStore({
    reducer:{
        app:presistedReducer,
        middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
          serializableCheck: {
            ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
          },
        }),
    },
   
})
export const Persistor =persistStore(store)
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

can you please help to figure out where i going wrong Thank you in Advance

1 Answers

seems you have initiated the middleware from the reducer, should be after:

export const store = configureStore({
  reducer: {
    combineReducers,
  },middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
});
Related