Redux-persist: How to limit to certain slices of the store?

[elado]

My store looks like

{
  app: {
    ui: {
      current: 'someId',
      filters: { x: 1 },
      tabs: ['x', 'y', 'z']
    },
    blah: { x: [..], y: {..} }
  },
  ...
}

I want to limit persistance to app.ui.current and app.ui.filters, but skip everything else.
Whitelist is not a good option as it takes only top level reducers (such as app), and I don't want to store the entire app as it can be pretty heavy.

Is there a way to customize the persistor so it'd persist only configured set of paths?

[martinblampied]

Get an answer to this?

[elado]

Yes. I reconfigured some parts and it works nicely:

// reduxPersist.js

import _ from 'lodash'
import {
  getStoredState as origGetStoredState,
  createPersistor as origCreatePersistor,
  createTransform,
} from 'redux-persist'

// define which keys to persist in local storage
const PERSIST_KEYS = [
  'app.ui.filters',
  'app.ui.currentBlah',
]

const CONFIG = {
  transforms: [createTransform(
    (inboundState, key) => {
      // pick only keys that are needed for persistence
      const keys = PERSIST_KEYS.map(k => k.replace(new RegExp(`^${_.escapeRegExp(key)}\\.`), ''))
      return _.pick(inboundState, keys)
    }
  )],
  keyPrefix: `reduxStore-v1:`,
}

const getStoredStatePromise = () => (
  new Promise((resolve, reject) => {
    origGetStoredState(CONFIG, (err, restoredState) => {
      if (err) reject(err)
      else resolve(restoredState)
    })
  })
)

export const getStoredState = async () => {
  const restoredState = await getStoredStatePromise()
  return _.pick(restoredState, PERSIST_KEYS)
}

export const createPersistor = store => origCreatePersistor(store, CONFIG)

// createStore.js

import { getStoredState, createPersistor } from './reduxPersist'

export default async function createCustomStore() {
  // ...
  const restoredState = await getStoredState()
  _.merge(initialState, restoredState)

  const store = createStore(..., initialState)
  createPersistor(store)

  return store
}

[martinblampied]

Thanks, will have a play. Also found: https://github.com/edy/redux-persist-transform-filter

[aguynamedben]

This hasn't been responded to in a long while, so I'm going to mark it as stale. Please feel free to continue the conversation and I'll reopen.