reactjsreact-reduxredux-persist

Passing reducer name to Redux-persist whitelist is not working


I want to make the user data persistent upon page refreshes. But when I successfully log in and check the Storage in browser developer tools' Application tab, it is empty. I have activated debugging for PersistGate but it is not showing anything. I have configured my Redux store like this:

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["user", "taskForm"], //here I have added the reducers
};

const persistedUserReducer = persistReducer(persistConfig, userReducer);

export const store = configureStore({
  reducer: {
    user: persistedUserReducer,
    taskForm: taskFormReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export const persistor = persistStore(store);

And here I wrap the app with the PersistGate:

root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor} debug={true}>
        <ThemeProvider theme={theme}>
          <BrowserRouter>
            <I18nextProvider i18n={i18n}>
              <App />
            </I18nextProvider>
          </BrowserRouter>
        </ThemeProvider>
    </PersistGate>
  </Provider>
);

And my dispatching is apparently working as I can see the "Stored in Redux: ", userData log.

try {
   dispatch(
      setUser({
          userData: userData,
          token: tokenResponse.data.access_token,
             })
           );
   console.log("Stored in Redux: ", userData);
} catch (dispatchError) {
   console.error("Error dispatching to Redux:", dispatchError);
   }

Solution

  • I got what the issue was.

    const rootReducer = combineReducers({ //I had to use this combiner
      user: userReducer,
      taskForm: taskFormReducer,
    });
    
    const persistConfig = {
      key: "root",
      storage,
      whitelist: ["user", "taskForm"], //here I have added the reducers
    };
    
    const persistedReducer = persistReducer(persistConfig, rootReducer);
    
    export const store = configureStore({
      reducer: persistedReducer //I should have passed the combined persisted reducer
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
          serializableCheck: false,
        }),
    });
    
    export const persistor = persistStore(store);