Nrthugu

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

I have pretty complex state in my app and this way works for me fine:
https://stackoverflow.com/a/37690899/7317796