Redux Toolkit createSlice的reducer内无法正常访问打印state问题

原因 #

Redux Toolkit 的 createSlice 内部默认集成了 Immer 库，用来支持直接修改 state 的 mutable 写法，你在 reducer 中拿到的 state 本质是 Immer 封装的 Proxy 代理对象，所以直接调用 console.log 输出的就是 Proxy 结构，无法直接查看实际存储的数据。

解决方案 #

• 方法1（优先推荐）：使用 Immer 自带的 current 函数
  从 @reduxjs/toolkit 中导入 current 工具，用它包裹你要打印的 state 片段，即可拿到原始的普通JS对象：

// 顶部导入依赖
import { createSlice, current } from '@reduxjs/toolkit'

// reducer 内打印代码
alterFavourite: (state, action) => {
  console.log(current(state.event))
  // 其余业务逻辑
}

• 方法2（临时快速排查用）：JSON 序列化转换
  如果不想额外导入依赖，可以通过序列化再反序列化的方式拿到普通对象，该方法存在局限性：无法处理函数、循环引用、Symbol 等不支持 JSON 序列化的内容：

console.log(JSON.parse(JSON.stringify(state.event)))

补充说明 #

你注释的示例代码存在两处常见问题：

1. filter 方法的回调函数没有 return 判断条件，无法正确过滤出目标项
2. 不要在 filter 遍历过程中直接修改项的属性，filter 设计用来做数组过滤，修改项属性可以直接遍历原数组或者用 map 方法处理。

内容的提问来源于stack exchange，提问作者Abu Sayem