[TIL][23.12.06] React 팬레터 앱 만들기 - thunk로 리팩토링

요약

Ract로 Fan Letter App 만들기 - thunk로 리팩토링

기존에 만든 팬레터 앱에서 redux에서 react-toolkit을 활용해 react-thunk로 리팩토링하는 작업

---

고민한 내용

 

props와 context api는 이해가 잘 되서 금방 적용했는데

기존 redux를 작업한게 많지가 않는게 가장 큰 문제였다.

일단 기존 redux할 것들까지 찾아서 툴킷화하는데 시간이 꽤 많이 걸렸다

 

 

1. JSON-SERVER

 

기존인 더미데이터를 활용해서 화면에 보여주는 형식이었다면,

이번엔 json-server 모듈을 활용해 db.jsoin 파일로 직접 넣어줬다. 

.env 파일에 url을 집어넣어서 전역으로 사용했었다.

 

2. React Thunk

 

기존 이름에서 -Slice.js로 파일들을 만들었고 안에서 리덕스 툴킷을 활용해 작업했다

export const __editUserList = createAsyncThunk(
  "editUserList",
  async (payload, thunkAPI) => {
    try {
      const response = await axios.get(
        `${process.env.REACT_APP_SERVER_URL}/lists?userId=${payload.userId}`
      );
      const listItems = response.data;
      const updatePromises = listItems.map(async (item) => {
        const itemId = item.id;

        const payloadItem = {
          nickname: payload.userName,
          img: payload.userImg,
        };

        try {
          const updatedResponse = await axios.patch(
            `${process.env.REACT_APP_SERVER_URL}/lists/${itemId}`,
            payloadItem
          );
          console.log(
            `Item with ID ${itemId} updated successfully`,
            updatedResponse.data
          );
        } catch (updateError) {
          console.error(`Error updating item with ID ${itemId}`, updateError);
        }
      });

      await Promise.all(updatePromises);
      return thunkAPI.fulfillWithValue(response.data);
    } catch (err) {
      console.log(err, "Error");
      return thunkAPI.rejectWithValue(err);
    }
  }
);

 

제일 기억나는 코드로 /list?userId=${userId}를 하면 해당 아이디를 가져올 수 있어서 이렇게 수정할 수 있겠구나! 

했는데 불가능했다. 이걸 해결하기 위해서 꽤 많은 시간을 들였는데...

알고보니 불가능한게 맞았다.

그래서 for문을 돌리는 형태로 작업을 했는데 그러면서 코드가 길어졌다.

안에서는 dispatch문을 사용 할 수 없다라고 봐서 그랬는데, 나중에 보니 그게 아니었다.

---

결과 화면

---

회고

 

라우터도 만들어놓은 틀과 로그인을 집어넣다보니 꼬여서 꽤나 많은 시간을 허비했다..

redux가 잘 이해안되서 못했던 부분을을 재학습하고 심화로 더 알 수 있어서 좋았던 시간이다.

꼭 가지고 싶었던 시간이었는데 좋았다.

거기에 redux내에서 navigate와 dispatch를 사용하고 싶었는데, 다 끝나고 코드들을 공유하면서

'아 불가능하구나'하고 넘겼던게 가능한 사실을 알게 됐다..

다음엔 적극 활용해 봐야겠다.