Breaking News: Grepper is joining You.com. Read the official announcement!

redux toolkit persitst store with next js latest

AKASH SIDDAMSHETTY answered on May 22, 2023 Popularity 4/10 Helpfulness 1/10

answer redux toolkit persitst store with next js latest

redux toolkit persitst store with next js latest

Comment

import { persistReducer, persistStore } from "redux-persist";
import storage from "redux-persist/lib/storage";

const rootReducer = combineReducers({
  [authSlice.name]: authSlice.reducer,
});

const makeConfiguredStore = () =>
  configureStore({
    reducer: rootReducer,
    devTools: true,
  });

export const makeStore = () => {
  const isServer = typeof window === "undefined";
  if (isServer) {
    return makeConfiguredStore();
  } else {
    // we need it only on client side
    const persistConfig = {
      key: "nextjs",
      whitelist: ["auth"], // make sure it does not clash with server keys
      storage,
    };
    const persistedReducer = persistReducer(persistConfig, rootReducer);
    let store: any = configureStore({
      reducer: persistedReducer,
      devTools: process.env.NODE_ENV !== "production",
    });
    store.__persistor = persistStore(store); // Nasty hack
    return store;
  }
};

// Previous codes 

export const wrapper = createWrapper<AppStore>(makeStore);

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: blog.logrocket.com

Tags: javascript next redux-toolkit store

Link to this answer
Share Copy Link

Contributed on May 22 2023

AKASH SIDDAMSHETTY

0 Answers Avg Quality 2/10

redux toolkit persitst store with next js latest

Contents

More Related Answers

redux toolkit persitst store with next js latest

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.