我已经成功地在next js中使用next-redux-wrapper实现了redux-persist。

Question

我正在从外部api获取数据并将其存储在reducer.And中，使用redux- another.But来持久化状态，同时从一个页面导航到持久化我已经将whiteList作为空数组离开，但所有状态都被持久化?需要帮助吗？

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

Answer 1

如果您将whitelist保留为空数组，则不会持久化任何内容。

您必须将希望持久化的redux reducers值放入字符串数组中。

示例：

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