Persist nested state object using 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

I recently released an open-source package called Redux Deep Persist, which can be very helpful in creating Redux Persist config for nested state no matter how deep it is. It can help you in this specific situation.

Here is what your config would look like:

import { getPersistConfig } from 'redux-deep-persist';
import storage from "redux-persist/es/storage/session";

const config = getPersistConfig({
    key: 'root',
    storage,
    whitelist: [
        'allProducts.004.productQty', 
        'allProducts.004.productData.0', // even specific indexes of arrays can be saved
    ],
    rootReducer, // your root reducer must be also passed here
    ... // any other props from the original redux-persist config omitting the stateReconciler
})

You can read more in the official documentation of redux-deep-persist https://github.com/PiotrKujawa/redux-deep-persist/blob/master/README.md