Persisting only some fields from the Reducer

Question

Hi in our app we have a reducer pattern:

{
   data: //here we have our actual data
   fetching: // is it still fetching 
   intact: // has it been 'touched'
   error: //errors if need be
}

furthermore due to business demand I need to persist a ReduxForm which is its own can of worms...

form: {
    Foobar: {
      values: {

      },
      initial: {

      },
      syncErrors: {

      },
      registeredFields: {

      }
    }
  }
}

it is as you may have figured out is pointless to persist anything but data, but Redux-Persist persists the entire reducer. The examples on filtering and transformation is a bit... lackluster in my feel and I have been strugling to implement. Looking for an example

Answer 1

Ok so this works using redux-persist-transform-filter like @NickHTTPS sugested:

import createFilter from 'redux-persist-transform-filter';

const saveSubsetFilter = createFilter('form', ['Foo.bar']);

const persistConfig = {
    key: 'form',
    storage,
    whitelist: ['form'],
    transforms: [saveSubsetFilter]
};

persistCombineReducers(persistConfig, { form: formReducer });

works like a charm :)

Answer 2

It's possible to whitelist/blacklist keys in redux-persist:

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig = {
  key: 'form',
  storage: storage,
  whitelist: ['Foobar'] // only Foobar will be persisted
};

const persistedReducer = persistReducer(persistConfig, rootReducer)

export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

Unfortunately whitelist/blacklist only accepts 1 level deep so I think you need to use something like this: https://github.com/edy/redux-persist-transform-filter or rework your data structure in a way that you can bypass the 1 level deep limitation of the library.

Hope it helps!