如何解决Redux-Persist 更新后不保存状态
Redux-persist 在更新后不保存 redux-store。它仅将initialState 保存到localStorage,然后不再使用实际数据进行更新。 在 Redux DevTools 中,我可以看到一些有关使用 initialState 进行补水操作的信息 Redux DevTools
configureStore.ts
import { applyMiddleware,createStore,compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';
import storage from 'redux-persist/lib/storage'; // localStorage
// import storage from 'localforage';
import { persistStore,persistReducer } from 'redux-persist';
import { createFilter } from 'redux-persist-transform-filter';
// import hardSet from 'redux-persist/lib/stateReconciler/hardSet';
import createReducer from './reducers';
export const persistConfig = {
key: 'root',storage,version: 2,};
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];
const enhancers = [applyMiddleware(...middlewares)];
const persistedReducer = persistReducer(persistConfig,createReducer());
export default (initialState = {}) => {
const store: any = createStore(persistedReducer,initialState,composeWithDevTools(...enhancers));
const persistor = persistStore(store);
store.runSaga = sagaMiddleware.run;
store.injectedReducers = {}; // Reducer registry
store.injectedSagas = {}; // Saga registry
if (module.hot) {
module.hot.accept('./reducers',() => {
store.replaceReducer(createReducer(store.injectedReducers));
});
}
return { store,persistor };
};
app.ts
import React from 'react';
import ReactDOM from 'react-dom';
import 'sanitize.css/sanitize.css';
import { Provider } from 'react-redux';
import { Router } from 'react-router';
import { PersistGate } from 'redux-persist/integration/react';
import App from './containers/App';
import configureStore from '../utils/configureStore';
import { history } from '../appHistory';
import 'semantic-ui-css/semantic.min.css';
const initialState = {};
const { store,persistor } = configureStore(initialState);
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router history={history}>
<App />
</Router>
</PersistGate>
</Provider>,document.getElementById('root'),);
在这里创建Reducer
import { combineReducers } from 'redux';
export default function createReducer(injectedReducers = {}) {
return combineReducers({
...injectedReducers,});
}
deps 版本: "redux-persist": "^6.0.0-pre2.1","redux": "^4.1.0","react-redux": "^7.2.4",
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。