CODEWITHSUNDEEP
reduxnext.jsredux-persistnext-redux-wrapper
Paras Buda
Paras Buda

Reputation: 55

I have successfully implemented the redux-persist with next-redux-wrapper in next js

Im getting data from the external api and storing it in the reducer.And im using redux-persist to persist the state while navigating from one page to another.But i have made left the whiteList as an empty array but all the state are being persisted?Need help

import "../assets/css/style.scss";
import "owl.carousel/dist/assets/owl.carousel.css";  
import "owl.carousel/dist/assets/owl.theme.default.css";
import Layout from "../component/Layout/Layout";
import { wrapper } from "../redux/store";
import { useEffect } from "react";
import { useStore } from "react-redux";
function MyApp({ Component, pageProps }) {
const store = useStore((store) => store);
useEffect(() => {
{
  typeof document !== undefined
    ? require("bootstrap/dist/js/bootstrap.bundle")
    : null;
}
}, []);
return (
<Layout>
  <Component {...pageProps} />;
</Layout>
);
}

export default wrapper.withRedux(MyApp);

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import rootReducer from "./index";
import { createWrapper, HYDRATE } from "next-redux-wrapper";
const middleware = [thunk];
let initialState={}

// BINDING MIDDLEWARE
const bindMiddleware = (middleware) => {
if (process.env.NODE_ENV !== "production") {
return composeWithDevTools(applyMiddleware(...middleware));
}
 return applyMiddleware(...middleware);
};


const makeStore = ({ isServer }) => {
if (isServer) {
//If it's on server side, create a store
return createStore(rootReducer,initialState, bindMiddleware(middleware));
} else {
//If it's on client side, create a store which will persis
const persistConfig = {
  key: "root",
  storage: storage,
  whiteList: [],
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer,initialState, bindMiddleware(middleware));
store.__persisitor = persistStore(store); // This creates a persistor object & push that 
persisted object to .__persistor, so that we can avail the persistability feature
return store;
}
};
// export an assembled wrapper
export const wrapper = createWrapper(makeStore);

Upvotes: 3

Views: 3814

Answers (1)

Gabriel Arghire
Gabriel Arghire

Reputation: 2360

If you keep the whitelist an empty array then nothing will be persisted.

You have to put inside that string array the redux reducers values you want to be persisted.

Example:

const persistConfig = {
  key: 'root',
  storage: storage,
  whiteList: ['cart', 'form', 'user'],
};

Upvotes: 1

Related Questions