redux 当登录到控制台而不是Reducer操作中的代理对象时，如何查看状态？

k4ymrczo 于 2022-11-12 发布在其他

关注(0)|答案(4)|浏览(113)

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

redux

来源：https://stackoverflow.com/questions/57240245/how-do-i-see-state-when-logging-to-the-console-instead-of-proxy-object-inside-re

4条答案

按热度按时间

bkhjykvo1#

Redux工具包包含了immer current函数，专门用于此目的。

console.log(current(state))

根据redux工具包文档，
来自immer库的current函数，它获取草稿当前状态的快照并将其最终化（但不冻结）。Current是一个很棒的实用工具，可以在调试过程中打印当前状态，并且current的输出也可以安全地泄漏到生产者之外。
immer docs中有其他信息。

赞(0）回复(0）举报 2022-11-12

arknldoa2#

你可以将你的对象转换为字符串与缩进的数量，检查下面的代码：

JSON.stringify(state, undefined, 2)

它返回类似于以下内容的内容

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

赞(0）回复(0）举报 2022-11-12

gg0vcinb3#

JSON.parse(JSON.stringify(state))

赞(0）回复(0）举报 2022-11-12

fafcakar4#

import { current } from '@reduxjs/toolkit'

const todosSlice = createSlice({
  name: 'todos',
  initialState: todosAdapter.getInitialState(),
  reducers: {
    todoToggled(state, action) {
      //ERROR: logs the Proxy-wrapped data
      console.log(state)`
      //CORRECT: logs a plain JS copy of the current data
      console.log(current(state))
    },
  },
})

赞(0）回复(0）举报 2022-11-12

我来回答

redux 当登录到控制台而不是Reducer操作中的代理对象时，如何查看状态？

4条答案

相关问题

热门标签

最新问答