JUNHEE LEE
70
2021-10-26 22:02:59 작성 2021-10-26 22:03:19 수정됨
0
55

타입스크립트 리듀서 초기값 타입 설정 관련 문제입니다!


알림 페이지에서 해당 게시물 클릭시, 리듀서를 통해 알림 상태를 true로 변환한 후에 해당 페이지로 라우팅하는 기능을 구현 중에 있습니다

GET 요청을 통해 받는 알림의 데이터 구조는 다음과 같습니다

{
    "notifications": [
        {
            "id": 754,
            "senderUserId": 114,
            "senderUserName": "Il-seob Bae",
            "receiverUserId": 740,
            "receiverUserName": "leejunhee",
            "postId": 743,
            "postTitle": "준희 가입신청할 글",
            "eventCategory": "COMMENT_ADDED",
            "timestamp": 1635234367,
            "read": false
        },

알림에 따른 타입 구성입니다

type notificationType = {
  id: number
  senderUserId: number
  senderUserName: string
  receiverUserId: number
  receiverUserName: string
  postId: number
  postTitle: string
  eventCategory: string
  timestamp: number
  read: boolean
}

리듀서 초기 설정을 위한 인터페이스입니다

interface notiInitialState {
  notifications: any[]
  // notifications: notificationType[]

  fetchNotisLoading: boolean
  fetchNotisSuccess: boolean
  fetchNotisFailure: null | Error

  updateNotiLoading: boolean
  updateNotiSuccess: boolean
  updateNotiFailure: null | Error
}

초기 상태를 나타내는 initialState 입니다

const initialState: notiInitialState = {
  notifications: [],

  fetchNotisLoading: false,
  fetchNotisSuccess: false,
  fetchNotisFailure: null,

  updateNotiLoading: false,
  updateNotiSuccess: false,
  updateNotiFailure: null,
}

UPDATE 요청 성공 시에, notifications 배열에서 해당 id 와 action.data가 같은 게시글을 캐치하여 read의 상태를 변화하려고 합니다.

case UPDATE_NOTI_REQUEST: {
        draft.updateNotiLoading = true
        draft.updateNotiSuccess = false
        break
      }
      case UPDATE_NOTI_SUCCESS: {
        draft.updateNotiLoading = false
        draft.updateNotiSuccess = true
        draft.notifications.find((v) => v.id === action.data).read = true
        break
      }
      case UPDATE_NOTI_FAILURE: {
        draft.updateNotiSuccess = false
        draft.updateNotiFailure = action.error
        break
      }

UPDATE_NOTI_SUCCESS 케이스에서 

draft.notifications.find((v) => v.id === action.data).read = true

다음과 같은 로직을 실행하려 했을 때, 인터페이스의 설정 때문에 undefined가 뜨게 되는데, 혹시나 해서 any로 이루어진 배열로 any[ ]로 표시하니 정상 동작하는 것을 확인했습니다..

타입스크립트를 쓰지 않는 기본 환경에서는 겪어보지 못한 문제라, 리듀서의 초기 state에 대한 설정 때문에 생기는 문제인 것 같습니다.

주석 처리된 부분으로 작성하면 왜 안되는지, 구조적인 문제라고 생각하지 않았는데 어떻게 변경하면 좋을지에 관한 조언을 해주시면 감사하겠습니다 !


0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.