Whitelist reducer subproperty only?

If I have an object on my state called purchases and it has two properties, an array called ‘list’ and a boolean called ‘syncing’:

{
  list: [],
  syncing: false
}

Is there a way I can just whitelist my list array like so?

persistStore(store, {
    storage: AsyncStorage,
    whitelist: [
        `purchases.list`
    ]
});

It doesn’t seem to work.

[elquimista]

@dwilt @icesyc With redux-persist v5, transforms should be passed to persistConfig parameter of either persistCombineReducers or persistReducer. Like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { persistStore, persistCombineReducers } from 'redux-persist';
import { createWhitelistFilter } from 'redux-persist-transform-filter';
import { PersistGate } from 'redux-persist/es/integration/react';
import storage from 'redux-persist/es/storage';
import reducers from './reducers';
import Router from './Router';

const persistConfig = {
  storage,
  key: 'root',
  transforms: [
    createWhitelistFilter('router', []),
    createWhitelistFilter('form', [])
  ]
};
const reducer = persistCombineReducers(persistConfig, reducers);
const store = createStore(reducer);
const persistor = persistStore(store);

const App = () => (
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <Router />
    </PersistGate>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));

[mividtim]

@dwilt @rt2zz

I came up with a 9-line solution that uses redux-persist without any other dependencies. Create a file persist.js with the following contents:

import { AsyncStorage } from 'react-native';
import { persistReducer } from 'redux-persist';
export function persist(key, whitelist, reducer) {
    return persistReducer({
        key,
        storage: AsyncStorage,
        whitelist,
    }, reducer);
}

You can now whitelist specific fields on any reducer. When creating reducers, you can export the reducer as usual if it doesn’t need to persist any keys, but you can use the function defined above to declare which fields to persist, and specify a unique key for the reducer in AsyncStorage. For instance, you can persist entire reducers in your root reducer, e.g.:

import { combineReducers } from 'redux';
// Import your persist function from wherever you created it
import { persist } from 'path/to/persist';
// import your reducers, and define your root reducer as usual,
// e.g. in a const named rootReducer
const rootReducer = combineReducers({
    activeUser,
    configuration,
    credentials,
    someOtherReducer,
});
// Use your imported `persist` function, specify the key "root", and whitelist any
// entire reducers as desired (here, we're not persisting someOtherReducer)
export default persist(
    'root',
    [
        'activeUser',
        'configuration',
        'credentials',
    ],
    rootReducer,
);

But you can also specify only specific keys at reducers at any depth:

// Import your persist function from wherever you created it
import { persist } from 'path/to/persist';
// define your reducer as usual
const initialState = {
    keyToIgnore: 'Don\'t persist this',
    keyToPersist: 'Persist this',
};
function someOtherReducer(state = initialState, action) {
    switch (action.type) {
        // etc.
    }
}
// Then pass it to your `persist` function before exporting,
// with the key name and whitelist of specific keys to persist
export default persist(
    'someOtherReducer',
    ['keyToPersist'],
    someOtherReducer,
);

I hope this helps anyone researching this particular issue. I have implemented this with Flow typings in practice. If anyone is interested in that, feel free to reach out.