23.11.30 TIL React redux toolkit thunk 오류

React redux toolkit thunk에서의 오류
팬레터페이지를 만드는 프로잭트를 진행하던 중 Redux thunk로 리팩토링 할 때 실질적으로 letter 페이지에서 보내는 값과 thunk에서 받는 값이 다르거나 그 이외에서 값을 받아오다가 못 받아 오고 다른 메소드를 읽을 수 없다는 등의 오류가 봇물터지듯이 나오기 시작했다.

ex)
letterList component에서 dispatch로 보낸 값: [{},{},{}] (배열안에 객체

thunk에서 받아오는 값 : [[{},{},{}]] 배열안에 배열안에 객체

그래서 오류가 나는 시점에서 부터 하나하나 콘솔을 찍으며 거슬러 올라가고 내려오기를 여러번 반복한 후 주변 사람들의 도움을 받아서 원인을 찾아 냈다.

문제의 원인

아래와 같이 __getLetter thunk를 복붙해서 __addLetter thunk를 만들었는데 다른건 다 수정했으나 thunk의 첫번째 인자인 이름을 수정해주지 않아서 데이터가 제 자리를 찾아가지 못했던 것...

export const __getLetters = createAsyncThunk(
  "getletters",
  async (payload, thunkAPI) => {
    try {
      const res = await api.get("/letters?_sort=createdAt&_order=desc");
      return thunkAPI.fulfillWithValue(res.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  }
);

export const __addLetters = createAsyncThunk(
  "getletters ",
  async (payload, thunkAPI) => {
    try {
      const res = await api.post("/letters", payload);
      console.log("추가한 레터스 값이다", res);
      thunkAPI.dispatch(__getLetters());
      return thunkAPI.fulfillWithValue(res.data);
    } catch (error) {
      console.log("추가한 레터스 오류다 ", error);
      return thunkAPI.rejectWithValue(error);
    }
  }
);

동일한 이름이 두개다 보니 컴퓨터도 햇갈려서 값을 addLetters에 보냈다가 getLetters에 보냈다가 했던 것 같다.
thunk의 첫번째 인자인 이름이 무슨 역할로 있는지 몰랐는데 이번에 확실히 알게 된 계기였다.