In a RTK reducer, your state is wrapped in a Proxy object by the immer library to detect modifications. After the reducer is finished, that proxy object is revoked to prevent memory leaks.
Unfortunately, console.log
does not log a in-time snapshot of an object, but a reference - and the time you try to actually explore these contents, it's already revoked.
As the documentation explains, you should log draft state values using the current
export from immer that is re-exported from RTK:
import { createSlice, current } from '@reduxjs/toolkit'
const slice = createSlice({
name: 'todos',
initialState: [{ id: 1, title: 'Example todo' }],
reducers: {
addTodo: (state, action) => {
console.log('before', current(state))
state.push(action.payload)
console.log('after', current(state))
},
},
})