Fittering 개발 기록 - 리덕스 툴킷 사용 관련 트러블 슈팅

트러블 슈팅 1 - 타입스크립트로 리덕스 툴킷 사용

자바스크립트 버전으로 공부한 리덕스를 타입스크립트 환경에서 적용하다보니 추가적인 타입 설정들이 필요하여 오류가 발생하게 되었다.

관련 오류에 대해서 검색을 해보던 중 해당 내용에 대한 튜토리얼 공식 문서가 있는 것을 확인하였고, 튜토리얼을 따라서 적용해보니 해결되었다.

https://redux.js.org/tutorials/typescript-quick-start

트러블 슈팅 2 - 리듀서가 의도한 대로 state를 업데이트 하지 못함

작업 생성자(action creators)를 생성하여 비동기 코드 실행하는 방식(해당 글 - 2.작업 생성자 생성 참고)으로 API 호출을 하고 해당 내용이 반영되게 하였는데 API 호출에 대한 응답은 정상적으로 돌아오나, state를 API의 응답 내용으로 업데이트하는 리듀서가 제대로 작동하지 않았다.

기존 코드

export const myPageSlice = createSlice({
  name: 'myPage',
  initialState: {} as MyPage,
  reducers: {
    setMyPage(state, action) {
      state = action.payload;
    },
  },
});

---

수정한 코드

import { MyPage } from '@/types/user';
import { createSlice } from '@reduxjs/toolkit';

export const myPageSlice = createSlice({
  name: 'myPage',
  initialState: {} as MyPage,
  reducers: {
    setMyPage(state, action) {
      state.email = action.payload.email;
      state.username = action.payload.username;
      state.gender = action.payload.gender;
      state.year = action.payload.year;
      state.month = action.payload.month;
      state.day = action.payload.day;
    },
  },
});

export const myPageActions = myPageSlice.actions;

export default myPageSlice.reducer;

해당 코드로 수정 후 해결하였다.