使用 redux-persist 持久化嵌套状态对象

Posted 2023-02-19

【中文标题】使用 redux-persist 持久化嵌套状态对象

【英文标题】：Persist nested state object using redux-persist

【发布时间】：2019-04-14 05:09:34

【问题描述】：

我正在尝试使用redux-persist API 来保持我的状态。我的状态结构如下。

var initState = 
  searchInp: "",
  allProducts: ,
  isProductDtlsLoading: true
;

其中allProducts 是一个嵌套对象数组，每个对象结构如下：

allProducts : 
004: 
   defaultOffer: null
   mrp: 550
   productData: […]
   productName: "Hair Dryer"
   productQty: 0
   sellingPrice: 450
   prodCode: "004"
   

现在，当我尝试持久化数据时，我可以看到应用程序选项卡中的 Chrome 开发人员工具，searchInp 的值保持正常并且不会由于页面刷新而丢失。 allProducts 的值在持久存储中更新得很好，但是当刷新时值会丢失，假设 productQty 默认为 0。 在这种情况下，如何保持嵌套对象属性，如 productQty？

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import  Provider  from "react-redux";
import  createStore, applyMiddleware  from "redux";
import rootReducer from "./Store/Reducers/reducer";
import thunk from "redux-thunk";
import  persistStore, persistReducer  from "redux-persist";
import storage from "redux-persist/es/storage/session";
import  PersistGate  from "redux-persist/lib/integration/react";
import hardSet from "redux-persist/lib/stateReconciler/hardSet";

const persistConfig = 
  key: "root",
  storage: storage,
  stateReconciler: hardSet
;

var pReducer = persistReducer(persistConfig, rootReducer);

var store = createStore(pReducer, applyMiddleware(thunk));
var persistor = persistStore(store);

var app = (
  <Provider store=store>
    <PersistGate persistor=persistor loading=null>
      <App />
    </PersistGate>
  </Provider>
);

ReactDOM.render(app, document.getElementById("root"));

【参考方案1】：

我的应用中有相当复杂的状态，这种方式对我很有效： https://***.com/a/37690899/7317796

【参考方案2】：

很可能你正在改变你的状态而不是用新的替换。 redux-persist 依赖于状态是不可变的这一事实，并且它应该正确地保留更改，除非它们已被变异，请参阅此处https://github.com/rt2zz/redux-persist/issues/623 的一些讨论。因此，请确保您正确更新状态并使用嵌套对象可能会很棘手，这里有一些关于 Cleaner/shorter way to update nested state in Redux?

的信息