Как я могу увидеть состояние при входе в консоль вместо прокси-объекта внутри действия reducer?

При использовании console.log() внутри действия reducer состояние печатается как прокси-объект, а не как объект, который я действительно хочу видеть. Как мне увидеть реальный объект? Я использую 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:

Вывод в консоль


person sutherlandahoy    schedule 28.07.2019    source источник
comment
вы пробовали todo.toJSON()?   -  person Sultan H.    schedule 28.07.2019
comment
@SultanH. todo имеет тип IToDo и поэтому не имеет toJSON функции.   -  person sutherlandahoy    schedule 28.07.2019
comment
@SultanH. вы были в правильном направлении: console.log(JSON.parse(JSON.stringify(todo))); печатает состояние. Это кажется излишним, но есть ли способ попроще?   -  person sutherlandahoy    schedule 28.07.2019
comment
что не так с расширением инструмента redux dev? chrome.google.com/webstore/detail/redux-devtools/   -  person Roy.B    schedule 28.07.2019


Ответы (2)


Инструментарий Redux включает функцию immer current специально для этой цели. Вы можете позвонить:

console.log(current(state))

Согласно документации по набору инструментов redux,

Текущая функция из библиотеки иммеров, которая делает снимок текущего состояния черновика и завершает его (но без зависания). Current - отличная утилита для печати текущего состояния во время отладки, и вывод тока также может безопасно передаваться за пределы производителя.

Дополнительная информация содержится в документации по погружению.

person Linda Paiste    schedule 02.11.2020

Вы можете преобразовать свой объект в строку с количеством отступов, проверьте код ниже:

JSON.stringify(state, undefined, 2)

Он возвращает что-то вроде этого

// { 
//   "firName: "..."
//   "lastName": '...',     
//   ... 
// }
person Purkhalo Alex    schedule 17.01.2020
comment
СПАСИБО!!! Теперь я могу перестать злиться и рвать волосы! - person Vippy; 25.09.2020
comment
null короче undefined - person NearHuscarl; 26.03.2021
comment
undefined имеет семантическое значение, утверждающее, что значение не передается аргументам - person Purkhalo Alex; 26.03.2021