stateReconciler deep merge example
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
options:
- do not nest messages, bring it up either to the top level of the reducer, or as its own reducer
- 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.
- 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.
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.
Isn't there a way we can write our own reconcilers or mention merge levels in configuration.
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;
},