Redux-Persist 更新后不保存状态

编程问答 2022-10-18

问题描述

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 (将#修改为@）

javascriptpersistreactjsreactjsreduxreduxredux