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

stateReconciler deep merge example

Open umairfarooq44 opened this issue 8 years ago • 4 comments

I have following state `{ bluerain: { intl: { locale: 'en', rtl: false, messages: { en:{}, ur:{}, ch:{}, } }

}` I have used redux-persist-transform-filter to ignore "messages" object while storing state in localstorage, initially messages are stored in initial state of redux store but due to shallow merge mesages in my initial store are not merged with that of localstorage state. Any suggestions so that my messages object will not stored in localstorage but I get messages from initial state in my store after autoRehydrate

umairfarooq44 avatar Oct 18 '17 07:10 umairfarooq44

options:

  1. do not nest messages, bring it up either to the top level of the reducer, or as its own reducer
  2. implement a custom REHYDRATE handler in your reducer. In there you can do whatever custom deep merge you like and then autoRehydrate will simply ignore that substate when it sees the state has been modified during rehydration.
  3. propose a PR to make state reconcilers pluggable. I think we want to go in this direction, because there are too many possible use cases to cover all with one reconciler. Some useful reconcilers that we can ship with are hardSet, shallowMerge, deepMerge, mergeLevel2. Not 100% on the naming but thats the idea.

rt2zz avatar Oct 18 '17 17:10 rt2zz

Can you please elaborate how to add reducer because after adding reducer new object with reducer name is created in the state and it have state from the local storage in that reducer and state updation of "intl" object in the above state is not affected by my reducer.

umairfarooq44 avatar Oct 20 '17 07:10 umairfarooq44

Isn't there a way we can write our own reconcilers or mention merge levels in configuration.

veharrison avatar Nov 09 '18 06:11 veharrison

import { cloneDeep, isObject, merge, omit } from 'lodash';

stateReconciler: (
  inboundState: Record<string, {}>,
  originalState: Record<string, {}>,
  reducedState: Record<string, {}>,
): Record<string, {}> => {
  const newState = cloneDeep(omit(reducedState, ['_persist']));

  return isObject(inboundState) ? merge({}, newState, inboundState) : newState;
},

BARTlab avatar Feb 21 '24 16:02 BARTlab