slice redux-toolkit（撤销代理）中状态的奇怪行为

Question

沙盒：https://codesandbox.io/s/ucjrx?file=/src/features/todos/todosSlice.js

在 todoSlice.js 的第 14 行，当我尝试执行 console.log 时，它被打印为已撤销的代理（浏览器控制台）。但是当我在 chrome 开发工具中放置一个断点并逐步通过该行时，它不是一个已撤销的代理。为什么会这样？

Answer 1

在 RTK reducer 中，您的状态被 immer 库包装在 Proxy 对象中以检测修改。 reducer 完成后，该代理对象将被撤销以防止内存泄漏。

遗憾的是，console.log 不会记录对象的 in-time 快照，而是记录参考 - 当您尝试实际探索这些内容时，它已经被撤销。

As the documentation explains，您应该使用来自 RTK 的 re-exported 的 current 导出的 current 记录吃水状态值：

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))
    },
  },
})

slice redux-toolkit（撤销代理）中状态的奇怪行为

Strange behviour of state in slice redux-toolkit (revoked proxy)

reactjs

immer.js

redux-toolkit