Redux-persist: Blacklist nested attributes

Created on 14 Jul 2016 · 8Comments · Source: rt2zz/redux-persist

Assuming my store objects looks like this
{ data: {search: {data: [....]}, history:{search: [...], product: [...]}, favourites: {search: [...], product: [...]}}, navigation: {....}, user: {....}}

How can I blacklist data.search, while keeping data.history and data.favourites ?
I've tried with['data.search'], but no luck.

Thank you.

Source

39otrebla

👍28

Most helpful comment

As @brunolemos and @rt2zz have suggested the code looks something like this:

import omit from 'lodash/omit'

let blacklistTransform = createTransform(
    (inboundState, key) => {
        if (key === 'data') {
            return omit(inboundState, ['search']);
        } else {
            return inboundState;
        }
    }
)
...
const persistConfig = {
    key: 'root',
    storage,
    transforms: [blacklistTransform],
}

gyosifov on 8 Oct 2018

👍6 🎉1

All 8 comments

This is not available out of the box but it should be trivial to write a transform that does that. It would look something like

let blacklistTransform = createTransform(
  (inboundState, key) => {
      if (key !== 'data') return inboundState
      else return {
        ...inboundState,
        data: undefined,
       }
  }
)

rt2zz on 21 Jul 2016

👍7

while I have not personally used it, this project aims to solve this problem: https://github.com/edy/redux-persist-transform-filter

rt2zz on 18 Sep 2016

@rt2zz lodash accept nested paths, so you could use pick for whitelist and omit for blacklist.

brunolemos on 2 Dec 2016

👍4

There is one more way. Store a getter function in place of nested key which needs to be blacklisted.

let nestedKey = "blacklisted";
let getNestedKey = ()=>nestedKey;
...
{
case REHYDRATE : return {...state,
nestedKey:getNestedKey
};
}

In storage getter function will always be null.

When passing as props call the getter function to get the actual value.

ankit90anand on 7 May 2017

As @brunolemos and @rt2zz have suggested the code looks something like this:

import omit from 'lodash/omit'

let blacklistTransform = createTransform(
    (inboundState, key) => {
        if (key === 'data') {
            return omit(inboundState, ['search']);
        } else {
            return inboundState;
        }
    }
)
...
const persistConfig = {
    key: 'root',
    storage,
    transforms: [blacklistTransform],
}

gyosifov on 8 Oct 2018

👍6 🎉1

Here's a slightly more modular version of @gyosifov's solution above:

import omit from 'lodash/omit';

const blacklistPaths = ['prop1', 'prop2', 'prop3.nestedProp'];
const persistConfig = {
    [...]
    blacklist: blacklistPaths.filter(a => !a.includes('.')),
    transforms: [
        // nested blacklist-paths require a custom transform to be applied
        createTransform((inboundState, key) => {
            const blacklistPaths_forKey = blacklistPaths.filter(path => path.startsWith(`${key}.`)).map(path => path.substr(key.length + 1));
            return omit(inboundState, ...blacklistPaths_forKey);
        }, null),
    ],
};