如何持久存储redux？

Question

我正试图坚持在redux存储中。当我刷新页面时，redux存储消失，但是存储数据存在于persist / REHYDRATE中。 store.js文件包含redux的配置。 index.js文件是根条目。 这里我使用的是redux-persist版本5.10.0。

store.js

import { createStore, applyMiddleware } from "redux";
import thunkMiddleware  from "redux-thunk";
import { createLogger } from 'redux-logger'
import { persistStore, persistReducer  } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { rootReducer } from '../Reducers/index';
import {composeWithDevTools} from 'redux-devtools-extension';

const loggerMiddleware = createLogger();

const persistConfig = {
  key: "root",
  storage,
  whitelist: ['authReducer']
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const middleware = composeWithDevTools(applyMiddleware(thunkMiddleware, loggerMiddleware))
const Store = createStore(persistedReducer, {}, middleware);

let persistor = persistStore(Store);
const dispatch = Store.dispatch;

export { Store, dispatch, persistor };

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './Styles/css/style.css';
import './Styles/Scss/index.scss';
import { Provider } from 'react-redux';
import { Store, persistor } from './Redux/Store/Store';
import { PersistGate } from 'redux-persist/integration/react';
import 'three-dots';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-grid.css';
import Loader from './components/Loader';

ReactDOM.render(
    <Provider store={Store}>
        <PersistGate loading={<Loader />} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>,
    document.getElementById('root')
);

页面刷新之前的数据

页面刷新后的数据