slice redux工具箱中的奇怪状态行为(已撤销的代理)

Question

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

在todoSlice.js的第14行，当我尝试执行console.log时，它被打印为一个已撤销的代理(浏览器控制台(。但是，当我在chrome-dev工具中放置一个断点并一步一步地遍历该行时，它并不是一个已撤销的代理。为什么会发生这种情况？

Answer 1

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

不幸的是，console.log并没有记录对象的实时快照，而是一个引用——当你试图实际探索这些内容时，它已经被撤销了。

正如文档所解释的，您应该使用从RTK:重新导出的来自immer的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))
},
},
})