实施 redux-persist

Question

我正在尝试弄清楚如何在我的应用程序中配置 redux persist。我的反应 index.js 文件中出现“'persistor' 未定义”。我只需要保留一个 user_id，这样当页面刷新时，在组件上获取的数据不会丢失。

这是我的 store.js 文件

import { createStore, combineReducers, applyMiddleware } from 'redux';
import userReducer from './reducers/userReducer';
import promiseMiddleware from 'redux-promise-middleware';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const rootReducer = combineReducers({
    userReducer
});

const persistConfig = {
    key: 'root',
    storage,
  }
   
  const persistedReducer = persistReducer(persistConfig, rootReducer)
   
  export default () => {
    let store = createStore(persistedReducer, applyMiddleware(promiseMiddleware))
    let persistor = persistStore(store)
    return { store, persistor }
  }

//export default createStore(rootReducer,  applyMiddleware(promiseMiddleware));

这是我在 React 应用程序中的 index.js 文件。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import { PersistGate } from 'redux-persist/integration/react'



ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Router>
        <App />
      </Router>
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Answer 1

您正在导入的 store 是一个函数，应该触发该函数以获得实际的 store 以及 persistor。

将您的商店导入重构为如下所示

import useStore from './redux/store';


const { store, persistor } = useStore();

或：

重构您的 store.js 文件

let store = createStore(persistedReducer, applyMiddleware(promiseMiddleware));
let persistor = persistStore(store);
export { store, persistor }

然后像这样从您的 index.js 文件导入它

import { store, persistor } from './redux/store';

实施 redux-persist

Implementing redux-persist

persist

reactjs

redux