state/immer-mutate-or-return

Dlaczego

Inside createSlice and createReducer, Immer lets a reducer "mutate" a draft. It also accepts a returned new state, but not both at once. An arrow with an expression body, such as (state, action) => state.push(action.payload), mutates the draft and returns the array length, and Immer throws when the action is dispatched.

Poprawka

Give the arrow a block body ((state, action) => { state.push(action.payload) }), or put void before the mutation. To replace the state instead, return a new value and leave the draft alone: (state, action) => state.filter((t) => t.id !== action.payload).

Przykłady

// bad
todoAdded: (state, action) => state.push(action.payload),
// good
todoAdded: (state, action) => {
  state.push(action.payload)
},
todoRemoved: (state, action) => state.filter((t) => t.id !== action.payload),

Źródła

• Redux Toolkit docs, Writing reducers with Immer (source in the reduxjs/redux-toolkit repository)

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain state/immer-mutate-or-return