The title is quite enough but I will add some code
interface State {
toto: string[]
}
action: setToto(["value1", "value2"])
reducer: returns {...state, toto: ["value1", "value2"]}
selector: selectToto() returns state.toto
My angular view has a selectToto() | async somewhere and gets triggered while doing another setToto(["value1", "value2"]) with the exact same value which I dont want to occur.
For now, I used Lodash.isEqual to check deep equality but I dont feel great about this approach
case Action.SetToto:
if (isEqual(state.toto, action.payload)) {
return state;
}
return {
...state,
toto: action.payload,
};
Who should check for equality ?
I hope you guys will come up with a best practice/design I am not aware of.
Def. not the component because that would be the hardest, and you possibly need to add that condition in multiple components, plus an action can be consumed by multiple reducers/effects.
So, either in the reducer, or the selector. To do the latter, you need to create your custom factory, see this talk by Alex for an in-depth explanation with example.