redux-persist-transform-filter icon indicating copy to clipboard operation
redux-persist-transform-filter copied to clipboard

Deal with nested combineReducers

Open EQuimper opened this issue 8 years ago • 7 comments

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

EQuimper avatar Jan 02 '17 06:01 EQuimper

+1 for this one, any idea or solution?

alvarolorentedev avatar Jan 21 '17 00:01 alvarolorentedev

@EQuimper is this how your store looks like? then the save filter should look like this:

const saveSubsetFilter = createFilter(
  'ui',
  ['gamesLiked', 'channelsLiked']
);

otherwise if its only a subset from the store, then you could try this instead:

const saveSubsetFilter = createFilter(
  'yourReducer',
  ['ui.gamesLiked', 'ui.channelsLiked']
);

see https://github.com/edy/redux-persist-transform-filter/blob/master/spec.js#L43-L50

edy avatar Jan 21 '17 09:01 edy

@edy Here is my store:

{
  route: {
    locationBeforeTransitions: null
  },
  language: {
    locale: 'en'
  },
  home: {
    introductionVisible: false
  }
}

The following code works fine:

const persistReducer = createFilter(
    null,
    ['home.introductionVisible']
);

And this one doesn't:

const persistReducer = createFilter(
    'home',
    ['introductionVisible']
);

According to your previous message, both should work. Any ideas?

yantakus avatar Mar 23 '17 16:03 yantakus

Hm, this snippet:

const persistReducer = createFilter(
    null,
    ['home.introductionVisible']
);

Doesn't seem to work either. It persists the whole home reducer, not just home.introductionvisible as expected.

May this be caused by the fact I'm using redux-persist-immutable, not just redux-persist?

yantakus avatar Mar 27 '17 09:03 yantakus

@yantakus i had similar issue and like as you say this is an issue regarding immutable that is not supported by this component, so i ended up doing my own filter:

let whitelistMyTopLevelReducerTransform = createTransform(
  (inboundState, key) => {
      if (key !== 'myTopLevelReducer') 
        return inboundState
      else 
        return { persistProperty: inboundState.persistProperty }
  }
)

also take in count you need to resolve your immutables

import {persistStore, autoRehydrate, createTransform} from 'redux-persist'
import immutableTransform from 'redux-persist-transform-immutable'

persistStore(store, {storage: AsyncStorage, transforms: [whitelistMyTopLevelReducerTransform, immutableTransform()]})

if one day there is a solution for nested reducers with inmmutables i will come back to this component :)

alvarolorentedev avatar Apr 06 '17 06:04 alvarolorentedev

Here's my solution for this: https://github.com/rt2zz/redux-persist/issues/330#issuecomment-298247527

elado avatar May 01 '17 19:05 elado

@yantakus @kanekotic https://github.com/actra-development/redux-persist-transform-filter-immutable ;-) I was facing the same issue and added a pull request #5 that was closed (for a good reason, btw) so I kind-of forked it.

actra-gschuster avatar Jun 27 '17 19:06 actra-gschuster