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

Posted 2023-02-22

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

【英文标题】：How do I see state when logging to the console instead of Proxy object inside reducer action?

【发布时间】：2019-12-05 23:47:37

【问题描述】：

在 reducer 操作中使用 console.log() 时，状态会打印为代理对象，而不是我真正想要查看的对象。我如何看到实际的对象？我正在使用 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 时在控制台中看到的输出：

【问题讨论】：

你试过todo.toJSON()吗？

@SultanH。 todo 的类型为 IToDo，因此没有 toJSON 函数。

@SultanH。不过，您的思路是正确的：console.log(JSON.parse(JSON.stringify(todo))); 打印状态。这感觉有点过头了，但肯定有更简单的方法吗？

redux 开发工具扩展有什么问题？ chrome.google.com/webstore/detail/redux-devtools/…

【参考方案1】：

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

console.log(current(state))

根据redux toolkit docs，

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

immer docs 中有更多信息。

【讨论】：

快速注意需要先导入current：import createSlice, current from "@reduxjs/toolkit";

【参考方案2】：

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

JSON.stringify(state, undefined, 2)

它返回类似这样的东西

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

【讨论】：

谢谢！！！现在我可以停止发疯和拔头发了！

null 比 undefined 短

undefined 具有断言该值未传递给参数的语义值