snippet

How to setup store and Redux Persist with Next.js for SSR

If you want to use Redux Persist with Next.js with SSR constraints, you have to follow some logic to make your code work when a page reloads.


The principle of Redux Persist is to make your Store persist after reloading a page and to keep this data afterwards when the user comes back to your site.


In this example of Store we also used Next Redux Wrapper to initialize the store before communicating with the components of your application.


import { applyMiddleware, createStore } from "redux";
import { createWrapper } from "next-redux-wrapper";
import thunkMiddleware from "redux-thunk";
import createWebStorage from "redux-persist/lib/storage/createWebStorage";
import rootReducer from "./reducers";

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== "production") {
    const { composeWithDevTools } = require("redux-devtools-extension");
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

const createNoopStorage = () => {
  return {
    getItem(_key) {
      return Promise.resolve(null);
    },
    setItem(_key, value) {
      return Promise.resolve(value);
    },
    removeItem(_key) {
      return Promise.resolve();
    },
  };
};

const makeStore = ({ isServer }) => {
  if (isServer) {
    return createStore(rootReducer, bindMiddleware([thunkMiddleware]));
  } else {
    const { persistStore, persistReducer } = require("redux-persist");

    const storage =
      typeof window !== "undefined"
        ? createWebStorage("local")
        : createNoopStorage();
    const persistConfig = {
      key: "myProject",
      whitelist: ["visitedProducts", "user", "cart"],
      storage,
    };

    const persistedReducer = persistReducer(persistConfig, rootReducer);
    const store = createStore(
      persistedReducer,
      bindMiddleware([thunkMiddleware])
    );

    store.__persistor = persistStore(store);

    return store;
  }
};

export const wrapper = createWrapper(makeStore, {
  debug: false,
});