Question

要在刷新页面时保持状态，我正在尝试集成redux-persist。但是，它不起作用。页面刷新清除状态。这是_persist对象int状态的样子：

_persist: {
   version: -1,
   rehydrated: true
}

这是configureStore.js：

import { createStore, applyMiddleware, compose } from "redux";
import logger from "redux-logger";
import thunk from "redux-thunk";
import rootReducer from "./_reducers/rootReducer";
import storage from "redux-persist/lib/storage";
import { persistStore, persistReducer } from "redux-persist";
const persistConfig = {
    key: "root",
    storage,
    whitelist: []
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const middlewares = [thunk];
// if (__DEV__) react native check dev
middlewares.push(logger);

const store = createStore(
    persistedReducer,
    {},
    compose(
        applyMiddleware(...middlewares),
        window.devToolsExtension ? window.devToolsExtension() : f => f)
);
const persistor = persistStore(store);

export { store, persistor };

这是index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { Provider } from 'react-redux';

import { PersistGate } from "redux-persist/lib/integration/react";
import { store, persistor } from "./configureStore";



const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

ReactDOM.render(
    <Router basename={baseUrl} history={history}>
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <App />
            </PersistGate>
        </Provider>
    </Router>,
    rootElement);

registerServiceWorker();

我无法弄清楚代码的问题。有帮助吗？

Answer 1

const persistConfig = {
    key: "root",
    storage,
    whitelist: ["pass reducer name which you want to persist in string"] e.g: whitelist: ["userAuth", "widgetAuth"]
};

如果您希望整个状态都保持不变，那么要从persistConfig中删除白名单键

Redux-persist无法正常工作：页面刷新会清除状态

1 个答案: