A state mutation was detected inside a dispatch: Even with toolkit

Question

This action is throwing the error below:

    setTimerState(state, { payload }: PayloadAction<{ timer: StepTimer, timerState: CookingTimerState }>) {
      const { timer, timerState } = payload
      const timerInStore = state.stepTimers
        .find(t => t.timerId === timer.timerId)!
      timerInStore.state = timerState
    }

Error: Invariant failed: A state mutation was detected inside a dispatch, in the path: cookingSession.stepTimers.0.state. Take a look at the reducer(s) handling the action {"type":"session/setTimerState","payload":{"timer":{"label":"Dance","durationSec":600,"stepIndex":0,"timerId":0,"state":2},"timerState":2}}

I thought Redux toolkit allowed you to make this kind of state change. Is it because my StepTimers are class objects not POJOs?

Answer 1

Correct. Only primitive values, objects, and arrays are considered serializable, and class instances are not.

Per the Redux Style Guide, you shouldn't be putting class instances in your state.