rt2zz / redux-persist

persist and rehydrate a redux store
MIT License
12.94k stars 866 forks source link

WhiteList is not working on NextJs #1279

Open masumluf opened 3 years ago

masumluf commented 3 years ago

I am trying to add a whitelist in my redux-persist but it doesnt works, Without whitelist it is working perfect but when I add white List it doesnt work.

here is my code

store.js

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer from "./rootReducer";
import { persistReducer } from "redux-persist";

import storage from "redux-persist/lib/storage";

const persistConfig = {
  key: "root",
  storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);

const initialState = {};
const middleware = [thunk];

const store = createStore(
  persistedReducer,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

_app.js

import App from "next/app";
import React, { useEffect } from "react";
import Axios from "axios";
import { Provider } from "react-redux";
import { createWrapper } from "next-redux-wrapper";
import store from "../store/Store";
import "quill/dist/quill.snow.css";
import { PersistGate } from "redux-persist/integration/react";

import "../styles/globals.css";
import "react-toastify/dist/ReactToastify.min.css";
import { persistStore } from "redux-persist";
// import '../styles/Navbar.css';

// const fetcher = async (url) => {
//   try {
//     const res = await Axios.get(url);
//     return res.data;
//   } catch (err) {
//     throw err.response.data;
//   }
// };

class MyApp extends App {
  componentDidMount() {
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }
  render() {
    const { Component, pageProps } = this.props;
    let persistor = persistStore(store);
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <Component {...pageProps}></Component>
        </PersistGate>
      </Provider>
    );
  }
}

const makestore = () => store;

const wrapper = createWrapper(makestore);

export default wrapper.withRedux(MyApp);