Блог

Песочница: https://codesandbox.io/s/ucjrx?file=/src/features/todos/todosSlice.js

В todoSlice.js , в строке 14, когда я пытаюсь выполнить console.log, он печатается как отозванный прокси (консоль браузера). Но когда я ставлю точку останова в chrome dev tools и шаг за шагом просматриваю эту строку, это не отозванный прокси. Почему это происходит?

В RTK-редукторе ваше состояние оборачивается в прокси-объект библиотекой immer для обнаружения изменений. После завершения работы редуктора этот прокси-объект отменяется для предотвращения утечек памяти.

К сожалению, console.log регистрируется не моментальный снимок объекта, а ссылка — и когда вы пытаетесь фактически изучить это содержимое, оно уже отменено.

Как объясняется в документации, вы должны регистрировать значения черновика состояния, используя current экспорт из immer, который повторно экспортируется из 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))
    },
  },
})