Redux-persist react native AsyncStorage Object Map serialization

Question

I am using redux persist to automatically persist and rehydrate the state on application launch as described in the docs, specifically using AsyncStorage: https://github.com/rt2zz/redux-persist.

It works correctly for String. That is all state which is store as a String is persisted and rehydrated correctly.

However for custom object maps it does rehydrate the state correctly. I am pretty sure this is because Strings are serializable and object maps aren't.

This is the reducer where productTypeToProducts is represents that map. When Re- hydrated is it empty

case 'RECEIVE_ALL_PRODUCTS':
  return Object.assign({}, state, {
    productTypeToProducts: action.productTypeToProducts
  });

Hence I need to use something like JSON.stringify to covert my state tree into JSON.

How do I implement this so that on application launch the the object state (not the JSON) is automatically rehydrated. (I am guessing this has something to with using transforms in the docs ?)

Shivam Sinha Shivam Sinha · Accepted Answer · 2017-01-09T04:04:20

It seems like by default AsyncStorage used in conjuction with redux-persist, does properly serialize an array of object. So I converted the Map to Array below in my reducer and it properly hydrated the state.

  case 'RECEIVE_ALL_PRODUCTS':
      let productsObject = {};
      action.productTypeToProducts.forEach((value,key)=>{
        productsObject[key] = value
      });
      return Object.assign({}, state, {
        productsAsObject: productsObject,
      });

Redux-persist react native AsyncStorage Object Map serialization

1 Answers