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

Question

I am trying to persist my state using redux-persist API. I have my state structure as below.

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

Where allProducts is a nested objects array with each object structure as below :

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

Now when I try to persist the data, I can see that Chrome Developer Tools in Application tab, the value for searchInp persists fine and is not lost due to page refresh. Value for allProducts is updated fine in the persisted store but then when refreshed the value gets lost and let's say productQty defaults to 0. How can I persist nested object properties like productQty in this case?

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"));

Answer 1

我的应用程序中有非常复杂的状态，这种方式对我来说很好： https ： //stackoverflow.com/a/37690899/7317796

Answer 2

Most probably you're mutating your state instead of replacing with new one. redux-persist relies on the fact that the state is immutable and it should persist the changes correctly unless they have been mutated, see some discussion here https://github.com/rt2zz/redux-persist/issues/623 . So make sure your correctly updating your state and with nested objects it can be tricky, here is some info on that Cleaner/shorter way to update nested state in Redux?