title: Persist nested state object using redux-persist
body: <p>I am trying to persist my state using <code>redux-persist</code> API. I have my state structure as below.</p>
  
  <pre><code>var initState = {
    searchInp: "",
    allProducts: {},
    isProductDtlsLoading: true
  };
  </code></pre>
  
  <p>Where <code>allProducts</code> is a nested objects array with each object structure as below : </p>
  
  <pre><code>allProducts : {
  004: {
     defaultOffer: null
     mrp: 550
     productData: [{…}]
     productName: "Hair Dryer"
     productQty: 0
     sellingPrice: 450
     prodCode: "004"
     }
  }
  </code></pre>
  
  <p>Now when I try to persist the data, I can see that Chrome Developer Tools in Application tab, the value for <code>searchInp</code> persists fine and is not lost due to page refresh. 
  Value for <code>allProducts</code> is updated fine in the persisted store but then when refreshed the value gets lost and let's say <code>productQty</code> defaults to 0.
  How can I persist nested object properties like <code>productQty</code> in this case?</p>
  
  <p>index.js</p>
  
  <pre><code>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 = (
    &lt;Provider store={store}&gt;
      &lt;PersistGate persistor={persistor} loading={null}&gt;
        &lt;App /&gt;
      &lt;/PersistGate&gt;
    &lt;/Provider&gt;
  );
  
  ReactDOM.render(app, document.getElementById("root"));
  </code></pre>