Passing reducer name to Redux-persist whitelist is not working

Question

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);
   }

okaeiz · Accepted Answer · 2024-09-22 09:27:29Z

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);

Collectives™ on Stack Overflow

Passing reducer name to Redux-persist whitelist is not working

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related