[실수 정리] payloadCreator의 인수 타입 지정, 객체 구조 분해 할당 문제.

문제 상황

동일한 oid 값에 대하여 백엔드에서 받아들이는 값의 형태가 다름

문제 파악 시도 및 분석

setReadNotification과 deleteNotification은 모두 notification의 별다른 데이터 없이 oid 값만 넘기는 간단한 함수임.

이 두 함수에서 차이가 나는 것으로 보건데 type 지정의 문제라고 생각하였음.

그러나 handleNotificationRead에서 thunk 함수로 넘기는 값을 string으로 줄 경우 인수의 전체값이 string으로 바뀌므로 틀린 분석이었음.

문제 해결 및 원인

thunk 함수의 payloadCreator 함수의 인수 값을 위와 같이 풀어서 넘긴 결과 값이 제대로 넘어가는 것을 확인함.

문제의 원인은 페이로드 크리에이터 함수가 받는 인수의 형태와 관련이 있다.

notificationId의 형태로 값을 넘기면 값이 들어오더라도 지정한 타입 모두가 포함된 값으로 넘어가고 {notificationId}로 넘기게 될 경우 지정한 타입중 notificationId에 해당하는 타입만 넘어가게 되는 것이다.

쉽게 설명하자면 일관된 형식으로 코드가 짜여 있어야 한다.

방식 ⓐ 문자열 직접 받도록 전달
export const setReadNotification = createAsyncThunk<NotificationDataType, string>(
  'notifications/setReadNotification',
  async (notificationId) => {
    try {
      const { data } = await axios.put(`${process.env.REACT_APP_NOTIFICATION_API_URL}/${notificationId}`);
      return data;
    } catch (error) {
      console.log(error);
    }
  }
);

const handleNotificationRead = (notificationId: string) => {
  dispatch(setReadNotification(notificationId));
}

방식 ⓑ 객체를 받도록 처리
export const setReadNotification = createAsyncThunk<NotificationDataType, SetReadNotificationArgsDataType>(
  'notifications/setReadNotification',
  async ({ notificationId }) => {
    try {
      const { data } = await axios.put(`${process.env.REACT_APP_NOTIFICATION_API_URL}/${notificationId}`);
      return data;
    } catch (error) {
      console.log(error);
    }
  }
);

const handleNotificationRead = (notificationId: string) => {
  dispatch(setReadNotification({ notificationId }));
}

나는 확장성을 고려하여 config을 옵셔널로 받도록 인수 타입을 지정했으므로 b의 방식을 통해 문제를 해결했다.

추가로 [object : Object]의 값은 다음과 같을 것이다

{ notificationId: "669a589d9e775518c0a14f8d" }

느낀점

이번 실수는 사실 기본적인 실수라고 볼 수 있다. 객체를 통째로 넘긴다면 함수 내에서 자체적으로 객체 구조 분해 할당이 일어나는데 이를 고려하지 못해서 일어난 실수다.

이런 부분을 좀 더 유념해서 코드를 짜야겠다.