1. dispatch 가 작동하지 않는다면, 혹시 State 를 reducer 함수에 직접 썼는지 확인한다.

리덕스의 reducer 함수 안에서, State 에 바로 접근 하는 것은 불가능하다.

<슬라이스>
    const ChoosPartsSlice = createSlice({
        name: "choose-part",
        initialState,
        reducers: {
            ChestDescription(state) {
                state = {...initialState}   // state 에 바로접근하면 Porxy 가 나올 뿐이다.
            },
            BackDescription(state) {
                state = {...initialState}  // state 에 바로접근하면 Porxy 가 나올 뿐이다.
            },
        },
    });

    export const ChooseActions = ChoosPartsSlice.actions;

    export default ChoosPartsSlice.reducer;

이 경우에는, Dispatch를 하더라도, Proxy 가 나오거나, 아예 실행이 되지 않는다.

 

 

 

 

추가사항

그러므로, State를 올바르게 다루기 위해서는, 애초에 State를 만들 때,

객체 혹은 배열 안에 집어 넣은 것을, 초기 조건으로 만들어야 좋다.

 

예시1. 초기조건을 각각 하나씩 집어 넣은 경우

<기존 initialState = 전체를 전부 바꾸려 해도, 하나씩 전부 초기화해야함 >

    const initialState: Partial<PartState> = {
        onDefaultPart: true,
        onChestPart: false,
        onBackPart: false,
    };

    const ChoosPartsSlice = createSlice({
        name: "choose-part",
        initialState,
        reducers: {
        ChestDescription(state) {
            state.onDefaultPart = false;
            state.onBackPart = false;
            state.onChestPart = true;
        },
        BackDescription(state) {
            state.onDefaultPart = false;
            state.onChestPart = false;
            state.onBackPart = true;
        },

 

 

예시2. 객체에 한번 감싼 후, 초기 조건을 설정한 경우

< 변경후 initialState = 전체를 한번에 바꿀 수 있음>

    const initialState: PartState = {       // 한번 객체에 집어넣어서
        descriptionState: {
            onDefaultPart: true,
            onChestPart: false,
            onBackPart: false,
        },
    };

    const ChoosPartsSlice = createSlice({   // state 를 바로 사용하지 않게 한다.
        name: "choose-part",
        initialState,
        reducers: {
            ChestDescription(state) {
                state.descriptionState = { ...initialState.descriptionState };
                state.descriptionState.onDefaultPart = false;
                state.descriptionState.onChestPart = true;
            },
            BackDescription(state) {
                state.descriptionState = { ...initialState.descriptionState };
                state.descriptionState.onDefaultPart = false;
                state.descriptionState.onBackPart = true;
            },
        },