Shouldn't the state be immutable?

问题

I have the folling code:

reducer:

export function testReducer(state = [], action:TestActions):any[] {
    switch (action.type) {
        case TestAction1Success: {
            return [...action.payload];
        }
        case TestAction2Success: {
            return [ ...state, action.payload ];
        }
        case TestAction3Success: {

            const list = state.map(x => {
                if(x.id === action.payload.id){
                    return action.payload
                }
                return x;
            })

            return [ ...list ];
        }
        default: {
          return state;
        }
    }
}

component:

  ngOnInit() {
    this.store.dispatch(new TestAction1()); // Fill store
    this.list$ = this.store.select(selectList)
  }

  // this is a click binding to each element of this.list$ in the view
  edit(listItem) {
    listItem.name = "ASDASDASD" // this line also change the value in store if any action is called after this
    this.store.dispatch(new TestAction2(listItem)); 
  }

This changes the store even though only "SuccessActions" are queried in the reducer. I can see why the state is changing. It is because the default value of the state is always given in the reducer. But shouldn't it be immutalbe, if i change a value from a subscribtion of a store?

回答1:

its pretty much your responsibility not to do it but to change state only in reducers in an immutable way. if you want to make sure this kind of mutation is prevented, you might want to take a look at ngrx-store-freeze, Immutable or similar...

usually, you would use store-freeze during development to ensure you don't have any mutations anywhere in your code (be it components or reducers) and then turn it off in production.

来源：https://stackoverflow.com/questions/54253689/shouldnt-the-state-be-immutable