edy / redux-persist-transform-filter Goto Github PK

View Code? Open in Web Editor NEW

191.0 6.0 21.0 825 KB

Filter transformator for redux-persist

License: MIT License

JavaScript 100.00%

redux transform filter

redux-persist-transform-filter's Introduction

redux-persist-transform-filter

Filter transformator for redux-persist

Installation

  npm install redux-persist-transform-filter

Usage

import { createFilter, createBlacklistFilter } from 'redux-persist-transform-filter';

// this works too:
import createFilter, { createBlacklistFilter } from 'redux-persist-transform-filter';

// you want to store only a subset of your state of reducer one
const saveSubsetFilter = createFilter(
  'myReducerOne',
  ['keyYouWantToSave1', 'keyYouWantToSave2']
);

// you want to remove some keys before you save
const saveSubsetBlacklistFilter = createBlacklistFilter(
  'myReducerTwo',
  ['keyYouDontWantToSave1', 'keyYouDontWantToSave2']
);

// you want to load only a subset of your state of reducer three
const loadSubsetFilter = createFilter(
  'myReducerThree',
  null,
  ['keyYouWantToLoad1', 'keyYouWantToLoad2']
);

// saving a subset and loading a different subset is possible
// but doesn't make much sense because you'd load an empty state
const saveAndloadSubsetFilter = createFilter(
  'myReducerFour',
  ['one', 'two']
  ['three', 'four']
);

const predicateFilter = persistFilter(
	'form',
	[
		{ path: 'one', filterFunction: (item: any): boolean => item.mustBeStored },
		{ path: 'two', filterFunction: (item: any): boolean => item.mustBeStored },
	],
	'whitelist'
)

const normalPathFilter = persistFilter(
	'form',
	['one', 'two'],
	'whitelist'
)

persistStore(store, {
  transforms: [
    saveSubsetFilter,
    saveSubsetBlacklistFilter,
    loadSubsetFilter,
    saveAndloadSubsetFilter,
  ]
});

Example project

git clone https://github.com/edy/redux-persist-transform-filter-example.git
cd redux-persist-transform-filter-example
npm install
npm start

redux-persist-transform-filter's People

Contributors

Stargazers

Watchers

redux-persist-transform-filter's Issues

redux-persist@^5.0.0 compatibility

Things seem to be working, npm complains about peer dependencies though.
Please advise.

redux-persist@^6.x.x compatibility

Sorry to be the messenger. Yup, javascript dependency hell strikes again, and redux-persist has increased by a mazor version, which means users of this library get:

npm WARN [email protected] requires a peer of redux-persist@^3.4.0 || ^4 || ^5 but none is installed. You must install peer dependencies yourself.

The good news is it looks like this doesn't affect you, since there are no breaking changes to the api except initialising redux-persist for react native.... so likely just a case of bumping the version compatibility.

Library size is too big

It is 9.4K gzipped much bigger than redux-persist.

Blacklist predicate filtering doesn't work properly on arrays

initial:

state = { a : { b: [1,2,3]  }
path: a.b
predicate: () => true

expected:
state = { a: { b: [] }
currently:
state = { a: { b: [undefined, undefined, undefined] }

lodash.set Prototype Pollution vulnerability

Blacklist?

Instead of specifing the keys of what to be saved would be nice to alos have the option to pass those keys you don't want to rememeber.

Is this possible? Or planned?

how do I create a save and load filter for multiple reducers?

is this correct?

const saveSubsetFilterA = createFilter(
  'events',
  ['isFetching', 'error', 'activeEventIds', 'activeEventFeed', 'expiredEventIds', 'expiredEventFeed', 'wonEventIds', 'wonEventFeed', 'activeEventFlags', 'activeEventsWinnersFeed']
)
const loadSubsetFilterA = createFilter(
  'events',
  ['isFetching', 'error', 'activeEventIds', 'activeEventFeed', 'expiredEventIds', 'expiredEventFeed', 'wonEventIds', 'wonEventFeed', 'activeEventFlags', 'activeEventsWinnersFeed']
)
const saveSubsetFilterB = createFilter(
  'settings',
  ['pushPermission', 'fcmToken', 'verficationAttempt', 'lastVerficationAttemptTimeStamp', 'textPermission', 'phoneNumber', 'serverTimeOffset', 'launchedFromHomescreen']
)
const loadSubsetFilterB = createFilter(
  'settings',
  ['pushPermission', 'fcmToken', 'verficationAttempt', 'lastVerficationAttemptTimeStamp', 'textPermission', 'phoneNumber', 'serverTimeOffset', 'launchedFromHomescreen'])

/////////////////////////////////////////////////////////////
       persistStore(store, {storage: localforage, blacklist: ['routing', 'listeners', 'form', 'notifications', 'analytics'],
        transforms: [saveSubsetFilterA, loadSubsetFilterA, saveSubsetFilterB, loadSubsetFilterB]}, () => {
          this.setState({ rehydrated: true })
        })

Deal with nested combineReducers

How can I deal with nestedReducer if I have something like

{
	api: {
		...apiReducer
	},
	ui: {
		gamesLiked,
		channelsLiked,
		navBar
	}
}

But I want to deal only with ui.gamesLiked and ui.channelsLiked

Big performance issue

I was using this library to blacklist a part of my reducer state.
This lead in big performances issues, using a simple blacklist filter like this one:

export const blackListEntitiesFilter = createBlacklistFilter('entities', [
  'activities',
  'photos',
  'users',
]);

With this filter, app became really slow ! The amount of datas is equivalent to 33kb.

So I use this custom filter that is doing the same:

  createTransform(
    // inbound
    (inboundState, key) => {
      return inboundState
        ? omit(inboundState, ['activities', 'photos', 'users'])
        : inboundState;
    },

    // outbound
    (outboundState, key) => {
      return outboundState
        ? omit(outboundState, ['activities', 'photos', 'users'])
        : outboundState;
    },

    {whitelist: ['entities']},
  ),

And the app works well for now, maybe it's related to the cloneDeep of this library when the state grow.
This library should use pick and omit from lodash, as this two functions are working with path and avoid cloning state !

"Maximum call stack size exceeded." triggered by version 0.0.18 [iOS]

Platform: iOS only; [Android is OK]

We've just upgraded to redux-persist-transform-filter: 0.0.18 and the following error is thrown.
Unfortunately, the call stack isn't very useful.

Maximum call stack size exceeded.

initCloneObject
    index.js:1253:66
baseClone
    index.js:869:31
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
cloneMap
    index.js:1030:33
initCloneByTag
    index.js:1290:22
baseClone
    index.js:877:30
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
cloneMap
    index.js:1030:33
initCloneByTag
    index.js:1290:22
baseClone
    index.js:877:30
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
cloneMap
    index.js:1030:33
initCloneByTag
    index.js:1290:22
baseClone
    index.js:877:30
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17
baseClone
    index.js:891:12
<unknown>
    index.js:897:39
arrayEach
    index.js:140:17

Persist only one reducer with sub elements everything else is blacklisted, how?

How to persist only 1 reducer with couple of keys everything else in that reducer is blacklisted?
My 10+ other reducers should also be blacklisted by default, I dont want to have to define each of them manually.

My config:

const persistMyReducer = persistFilter('myReducer', ['myReducerObject1', 'myReducerObject2'], 'whitelist');

const persistConfig = {
    key: 'root',
    storage,
    transforms: [persistMyReducer]
};

Bad release

The latest (0.0.8) version on npm, was released without the dist files pre-compiled with Babel.

Lodash function imports cause errors

I'm using "redux-persist-transform-filter": "^0.0.21", and getting these 4 errors:

ERROR in ./node_modules/redux-persist-transform-filter/dist/index.js 28:14-38
Module not found: Error: Can't resolve 'lodash/pickby'

ERROR in ./node_modules/redux-persist-transform-filter/dist/index.js 32:15-40
Module not found: Error: Can't resolve 'lodash/isempty'

ERROR in ./node_modules/redux-persist-transform-filter/dist/index.js 36:13-36
Module not found: Error: Can't resolve 'lodash/forin'

ERROR in ./node_modules/redux-persist-transform-filter/dist/index.js 40:17-44
Module not found: Error: Can't resolve 'lodash/clonedeep'

Looking at the code it looks like these four import statements should use camelcase, like:
import pickBy from 'lodash/pickBy' instead of
import pickBy from 'lodash/pickby', etc...

documentation: transforms inside persistReducer instead of persistStore

Current documentation inside README.md contains the following example code:

persistStore(store, {
  transforms: [
    saveSubsetFilter,
    saveSubsetBlacklistFilter,
    loadSubsetFilter,
    saveAndloadSubsetFilter,
  ]
});

Using this with redux-persist in version 5.9.1 results in thrown error-message:
redux-persist: invalid option passed to persistStore: "transforms". You may be incorrectly passing persistConfig into persistStore, whereas it should be passed into persistReducer.

Please update usage-example to something like this:

// "loading"-attribute should not be loaded from store
const loadPartialLoginFilter = createFilter(
    'login',
    null,
    ['loading'],
    'blacklist'
);

// prepare persist configuration
const persistConfig = {
    key: 'root',
    storage,
    whitelist: ['settings', 'login'],
    transforms: [
        loadPartialLoginFilter
    ]
};
  
const persistedReducer = persistReducer(persistConfig, reducers);

const store = createStore(
    persistedReducer,
    {},
    composeEnhancers(applyMiddleware(ReduxThunk, createLogicMiddleware(logics, deps)))
);

// "transforms" is not applied here
export const persistor = persistStore(store);

( is not a function in createFilter

Think you've pushed a typo around here: a151e78#diff-090b05cdc4c33b5b4d778c13de44d8eaL30

I'm getting the following error in my react native project locally:

Partial initial state and usage help / docs

@edy thanks for this repo!
It seems the rehydration is not properly dealing with defaults when using transforms.

Here my default state:

const defaultState = {
    computing: [],
    notification: null,
    token: null,
    data: {},
};

Here the persist transforms applied (I want only main.token to be persisted):

import { createFilter, createWhitelistFilter, createBlacklistFilter } from 'redux-persist-transform-filter';

const loadFilter = createWhitelistFilter('main', ['token']);

const persistConfig = {
    key: 'user',
    keyPrefix: 'user/',
    transforms: [loadFilter]
};

What happens after rehydrate dispatch is the following:

{
  main: {
    token: 'blabla'
  },
  _persist: {
    version: -1,
    rehydrated: true
  }
}

Since data:{} default is not applied but totally removed because ignored in the transform I get errors.

How can I deal with this situation? Persist just wanted keys and apply defaults to the others?
Would it be possible to always rehydrate to the default and then apply the rehydration of wanted subkeys?

Can't blacklist a subset

Hello,
I'm running into troubles trying to blacklist a part of my reducer.
here is my entriesReducer's initial state:


const initialState = {
    serverCopy : [],
    entriesPerDay : [], 
    pickedDate : new Date(),
    total: "0:00",
    workingCopy : [],
    activities: [],
    pickedEntry: null,
    loggedInUser: null,
    newnewPickedDate : null,
}

I want the entriesPerDay, the pickedDate and the pickedEntry to have their default values when the app starts. That's the most important thing. If possible, I'd like to rehydrate ONLY the serverCopy and the workingCopy. Here is the code of my store configurations:


const saveSubsetFilter = createFilter(
    'entriesReducer',
    ['serverCopy', 'workingCopy']
  );

    const loadSubsetFilter = createFilter(
        'entriesReducer',
    null,
    ['serverCopy', 'workingCopy']
  );

   const saveSubsetBlacklistFilter = createBlacklistFilter(
    'entriesReducer',
    [ 'pickedEntry' , 'entriesPerDay', 'pickedDate']
  );

const persistConfig = {
    key: 'root',
    storage: storage,
    stateReconciler: autoMergeLevel2  ,// see "Merge Process" section for details.
    transforms: [
    
        saveSubsetFilter,
      loadSubsetFilter,
      saveSubsetBlacklistFilter
     
    ]
   };

When I reload the app everything in the entriesReducer gets rehydrated. Why would that happen?

Transform ordering, restore subset with defaults

Hi, this transform is great! Hopefully there is a solution that I'm just missing but it seems to me if you are only storing a subset of your reducer's state, on restoration of said data you'll be missing the other keys.

In the case I'm seeing, I have initial state available before localForage has been returned. Since it is only restoring a subset of my keys, it blows away the initial values of the non-stored keys.

Of course I could move the non-stored keys to another reducer but this doesn't make logical sense from the app perspective. It would also remove the usefulness of this transform for this use case. I could also have the reducer check to see if all keys are present and merge defaults if they aren't but this simple check would happen far too often when it only needs to happen once.

I doubt this is too far fetched to come up in other situations. Any guidance would be appreciated.

Also, this transform does not appear to work if placed after the immutable transform. I haven't seen that documented anywhere but I might have missed it. Thanks!

Cannot blacklist a property under dynamically created key

Here are my example types of properties that are stored in Redux. I can not blacklist a property (the name is blacklistProperty in that example) under a dynamically created key (UUID)

type EntitiesSlice = { entities: {[id: string]: EntityState} };
type EntityState = { id: string; persistProperty: string; blacklistProperty: string; };

Filterfunction should work with non object values

Due to the way the filterFunction is currently implemented it is only able to handle objects. This causes strings in the state to be "objectified" during a filterFunction operation.
eg

{
    "0": "A",
    "1": "B",
    "2": "C",
    ...
}

using this removes my keys from store completely

So my initial state of store is like so:

reducerA: {
a: null,
b: null,
c: {}
}

if i use this to create a BlackList

createBlacklistFilter('reducerA', [
  'c',
])

Then Right after persist/REHYDRATE fires my store is updated to :

reducerA: {
a: null,
b: null,
}

I thought the intended goal was to not persist certain keys but still have the store fallback to initial state. AM I doing something wrong?