Avoid State Mutation in NgRx Reducer

Question

I'm new to Redux/NgRx and also fairly new to JavaScript. Trying to implement a sample state change. I understand that when I dispatch an action, in the reducer, I should be creating a new state from previous state and update part of it and return. Thus not to mutate the existing state. However, with my code below, I always see in the dev tools that my state is being mutated instead of new version. What is incorrect in the reducer?

Reducer:

export interface State {
  transactions: []
}

export function trasactionReducer (state: State, action: txActions.Actions) {

  switch (action.type) {
    case txActions.LOAD_ACCOUNT_TRANSACTION:
      return {...state};

    case txActions.STORE_ACCOUNT_TRANSACTION:
      return {...state, 
        transactions : action.payload
      };

    default:
      console.log("transactionReducer, defaul action triggerred for action: "+ action.type);
      return state;
  }

}

This seems fine to me, how do you see that your state is being mutated? — timdeschryver
@timdeschryver I'm sorry, I was looking at the dev tool and it seemed to mutate the state, but now I'm beginning to think, perhaps the tool just shows the updated state and may be that doesn't equate to mutation, but I'm not sure either. — Aragorn

timdeschryver timdeschryver · Accepted Answer · 2018-10-25T17:27:10

As already said in the comments, I think you aren't mutating the state directly. If you want to be sure, you can use the ngrx-store-freeze package in dev mode, this will throw an error if you do mutate the state.

Avoid State Mutation in NgRx Reducer

1 Answers