Redux中出现Proxy对象而非数组的原因及Proxy对象解析

1. 什么是这个Proxy对象 #

Redux Toolkit（RTK）内置了Immer库来简化不可变状态更新。Immer会将Redux的state包装成Proxy对象——这是ES6提供的一种对象拦截机制，能监听对目标对象的读取、修改等操作。Immer通过这个Proxy追踪你对state的所有修改，最终自动生成全新的不可变状态，无需手动编写对象/数组的复制逻辑（比如展开运算符...）。

你在控制台看到的Proxy，本质就是被Immer包装后的目标数组/对象，它的功能和普通数组完全一致，仅控制台显示形式不同。

2. 为什么不是预期的数组形式 #

代码存在属性访问错误 #

你的FooState类型定义中，state的属性为selected，但代码里写的是state.foo[action.key].bar——state.foo是不存在的属性，正确写法应为state.selected[action.key].bar。你当前能得到Proxy，说明之前已有对应key的属性被存入state.selected中。

控制台显示的是Immer的包装态 #

即使访问的是正确的数组，控制台打印结果依然是Proxy——因为在reducer函数执行期间，state处于Immer的追踪状态，被Proxy包裹。你可以直接使用这个Proxy对象（比如调用map方法、访问索引），它的行为和普通数组无差异。如果想在控制台查看真实数组内容，可通过console.log(Array.from(thisGivesMeTheProxyObject))或console.log(JSON.parse(JSON.stringify(thisGivesMeTheProxyObject)))解开包装。

内容的提问来源于stack exchange，提问作者four-eyes