What is the best practice in NGRX in order to avoid a state property to get updated with the same va-CodePudding

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 ?

The selector ?
The reducer ?
My component ?

I hope you guys will come up with a best practice/design I am not aware of.

CodePudding user response：

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.

https://www.youtube.com/watch?v=E7GKnjGCXzU