登录控制台时如何查看状态而不是减速器操作中的代理对象? [英] How do I see state when logging to the console instead of Proxy object inside reducer action?

问题描述

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

When using console.log() inside a reducer action, the state prints as a Proxy object, instead of the object I actually want to see. How do I see the actual object? I am using redux-starter-kit createSlice, I am not sure if this has anything to do with it.

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 时在控制台中看到的输出:

This is the output I see in the console when I toggle my ToDo:

推荐答案

Redux 工具包包含专门用于此目的的 immer current 函数.您可以拨打:

Redux toolkit includes the immer current function specifically for this purpose. You can call:

console.log(current(state))

根据 redux 工具包文档，

来自 immer 库的当前函数，它对草稿的当前状态进行快照并完成它(但不会冻结).电流是调试时打印当前状态的一个很好的工具，电流的输出也可以安全地泄漏到生产者之外.

The current function from the immer library, which takes a snapshot of the current state of a draft and finalizes it (but without freezing). Current is a great utility to print the current state during debugging, and the output of current can also be safely leaked outside the producer.

immer 文档中有更多信息.

这篇关于登录控制台时如何查看状态而不是减速器操作中的代理对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！