CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-toolkitredux-persist
brw.064
brw.064

Reputation: 111

(Redux Persist) TypeError: storage.getItem(...).then is not a function

I'm attempting to integrate with redux persist in my React application using Redux Toolkit. I'm getting the following error with my integration though:

TypeError: storage.getItem(...).then is not a function

Here's what my store looks like:

const transientReducer = combineReducers({
  loading: loadingSlice.reducer,
});

const persistentReducer = persistReducer({
  key: "root",
  storage: localStorage,
}, combineReducers({
  test: testSlice.reducer,
})); 

const reducer = combineReducers({
  transient: transientReducer,
  persistent: persistentReducer,
});

export const store = configureStore({
  reducer,
  middleware: getDefaultMiddleware({ 
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
    }
  })
});

export const persistor = persistStore(store);

Here's what my App.tsx setup looks like:

<Provider
  store={store}
>
  <PersistGate
    persistor={persistor}
    loading={null}
  >
    <App />
  </PersistGate>
</Provider>

Can anyone point out what I'm doing wrong?

Upvotes: 3

Views: 4119

Answers (1)

Linda Paiste
Linda Paiste

Reputation: 42228

Your issue is that you are using the global localStorage object. You want to import the settings from the redux-persist package instead.

import storage from 'redux-persist/lib/storage';

docs link

Upvotes: 4

Related Questions