使用persistStore()函数是Redux Persist库中的一个方法,用于持久化存储Redux的状态。
首先,确保已经安装了redux和redux-persist这两个依赖包。
import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 指定存储方式,默认为localStorage
// 创建reducer
const rootReducer = combineReducers({
// 你的reducer
});
// 持久化配置
const persistConfig = {
key: 'root', // 存储的key,可以自定义
storage, // 指定存储方式,默认为localStorage
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
const persistor = persistStore(store);
export { store, persistor };
现在,你可以在应用程序的入口文件中,如index.js文件中,将store和persistor包装在PersistGate中,以确保在加载和重新加载应用程序时正确恢复Redux的状态:
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById('root')
);
至于你提到的错误:“store没有有效的缩减程序”,这个错误通常是由于未正确配置Redux的reducer导致的。请确保你的reducer合并正确,并且每个reducer都返回一个有效的状态。
希望这个答案能帮助到你,如果有任何疑问,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云