reactjs - 登录到控制台而不是减速器操作中的代理对象时如何查看状态？

Question

在console.log()reducer 操作中使用时，状态打印为 Proxy 对象，而不是我真正想看到的对象。我如何看到实际的对象？我正在使用 redux-starter-kit createSlice，我不确定这是否与它有关。

import { createSlice } from "redux-starter-kit";

export interface IToDo {
    id: number;
    name: string;
    complete: boolean;
}

const initialState: IToDo[] = [
    {
        id: 1,
        name: 'Read a bit',
        complete: true
    }
];

const { actions, reducer } = createSlice({
    slice: "todos",
    initialState,
    reducers: {
        toggleTodo(state: IToDo[], action) {
            const todo = state.find(todo => todo.id === action.payload);
            console.log(todo);
            if (todo) {
                todo.complete = !todo.complete;
            }
        }
    }
})

export const toDosReducer = reducer;
export const { toggleTodo } = actions;

这是我在切换 ToDo 时在控制台中看到的输出：

Answer 1

Redux 工具包包含current专门用于此目的的 immer 函数。您可以致电：

console.log(current(state))

根据redux 工具包文档，

immer 库中的当前函数，它获取草稿当前状态的快照并最终确定它（但不冻结）。Current 是一个很好的工具，可以在调试期间打印当前状态，并且 current 的输出也可以安全地泄漏到生产者之外。

immer 文档中有其他信息。

Answer 2

您可以将对象转换为具有缩进数的字符串，请检查以下代码：

JSON.stringify(state, undefined, 2)

它返回这样的东西

// { 
//   "firName: "..."
//   "lastName": '...',     
//   ... 
// }