1

我从外部api获取数据并将其存储在reducer中。我使用redux-persist在从一个页面导航到另一个页面时保持状态。但是我已经将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);
4

1 回答 1

0

如果您保留whitelist一个空数组，则不会保留任何内容。

redux reducers您必须将要保留的值放入该字符串数组中。

例子：

const persistConfig = {
  key: 'root',
  storage: storage,
  whiteList: ['cart', 'form', 'user'],
};
于 2021-10-19T11:37:18.083 回答