리듀서 액션 내의 프록시 오브젝트가 아닌 콘솔에 로깅할 때 상태를 어떻게 표시합니까?

리듀서 액션 내의 프록시 오브젝트가 아닌 콘솔에 로깅할 때 상태를 어떻게 표시합니까?

사용시console.log()리듀서 액션 내에서 상태는 실제로 보고 싶은 오브젝트가 아닌 Proxy 오브젝트로 출력됩니다.실제 물체를 어떻게 볼 수 있습니까?저는 redux-starter-kit create Slice를 사용하고 있는데, 이것이 관련이 있는지 잘 모르겠습니다.

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를 전환하면 콘솔에 표시되는 출력은 다음과 같습니다.

솔루션

를 사용해야 합니다.current실제 상태 값을 확인하기 위해 기능을 수행합니다.

리듀서에서는 다음을 호출할 수 있습니다.

console.log(current(state));

이것.current함수는 Redux Toolkit의 종속성인 Immer 패키지에서 가져옵니다.Redux Toolkit을 통해 다시 내보내므로 다음 중 하나의 패키지에서 가져올 수 있습니다.

import { createSlice, current } from '@reduxjs/toolkit';

또는

import { createSlice } from '@reduxjs/toolkit';
import { current } from 'immer';

는 왜 표시되는가?Proxy?

Redux 툴킷createSlice그리고.createReducer도우미 함수는 사용자가 직접 수정하는 리듀서를 쓸 수 있도록 합니다.state변수.이렇게 하면 새로운 상태 개체를 항상 반환해야 하며 상태 값을 변환할 수 없는 기존 방식에 비해 많은 코드와 골칫거리가 줄어듭니다.

'변환'해도 상관없습니다.stateRedux Toolkit 리듀서의 변수입니다.state변수는 실제 상태가 아닙니다.그것은 이다.Proxy물건.구체적으로는 Immer 드래프트입니다.

기본 개념은 Immer를 사용하여 모든 변경 내용을 임시 초안에 적용한다는 것입니다. 임시 초안은 현재 상태의 프록시입니다.모든 돌연변이가 완료되면 Immer는 드래프트 상태에 대한 돌연변이를 기반으로 다음 상태를 생성합니다.즉, 데이터를 수정하는 것만으로 데이터와 상호 작용할 수 있으며, 불변의 데이터의 모든 이점을 유지할 수 있습니다.

자세한 내용은 다음을 참조하십시오.

• Redx docs - 불변의 갱신 패턴
• Immer 문서 - Immer 구조
• MDN Web 문서 - 프록시

뭐가current()?

그currentfunction은 디버깅을 위해 초안 객체의 현재 상태에 액세스하는 방법입니다.그렇지 않으면 초안 자체를 볼 수 있습니다.Proxy별로 도움이 안 돼요당신은 아마 절대 사용하지 않을 것이다.current콘솔 로깅 이외의 모든 것을 위해 사용됩니다.

이 함수는 Immer 패키지의 일부이며, 이 목적으로 Redx Toolkit에 의해 다시 내보냅니다.

current

초안의 현재 상태를 스냅샷으로 만들어 완성하는 immer 라이브러리의 현재 함수입니다(고정하지 않음).전류는 디버깅 중에 현재 상태를 인쇄하는 데 유용한 유틸리티이며, 전류 출력도 생산자 외부에 안전하게 누출될 수 있습니다.

자세한 내용은 다음을 참조하십시오.

• Immer 문서: 초안에서 현재 상태 추출
• Redx Toolkit 문서: 다른 라이브러리에서 내보내기

개체를 표시 수가 있는 문자열로 변환할 수 있습니다. 아래 코드를 확인하십시오.

JSON.stringify(state, undefined, 2)

그것은 이런 것을 돌려준다.

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

JSON.parse(JSON.stringify(state))

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))
    },
  },
})

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