问题描述
我想弄清楚如何在我的应用程序中配置 redux 持久化。我在我的 react index.js 文件中得到一个“'persistor' is not defined”。我只需要保留一个 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();
解决方法
您要导入的 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';