Answer a 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?

Answers

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.