[TypeScript] redux-toolkit과 redux-thunk 같이 사용하기

Today, What I learned?

팀원 분의 SOS로!.. 리덕스로 구현되어 있던 API 불러오는 로직을 redux-toolkit과 redux-thunk로 리팩토링 하는 과정을 같이 고민하게 되었다. 고민의 시간이 길었던 이유는 우리 프로젝트는 타입스크립트로 구성된 프로젝트였기 때문이다!..

 

 

타입스크립트에서의 createAsyncThunk

API를 가져오는 과정에서, 필요한 선택적 매개변수가 3개나 되었기 때문에 좀 더 어려웠던 것 같다.
아래는 완성된 로직이다. payload에 해당하는 부분을 구조분해할당으로 가져와서 사용하고 있다.

export const getSearchVideos = createAsyncThunk(
  'getSearchVideos',
  async ({ channelId, orderType, results }: VideoPayload, thunkAPI) => {
    try {
      const { data } = await request('/search', {
        params: {
          part: 'snippet',
          channelId: channelId,
          order: orderType ?? 'date',
          maxResults: results ?? 50,
          pageToken: '',
          type: 'video',
        },
      });

      return thunkAPI.fulfillWithValue(data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

payload의 타입이 없을 경우 에러가 발생하기 때문에 이렇게 타입을 따로 지정해 주었다. 채널 아이디를 빼고는 선택적이다.

interface VideoPayload {
  channelId: string;
  orderType?: string;
  results?: number;
}

 

 

타입스크립트에서의 extraReducers

타입스크립트에서의 extraReducers에 정의해 주는 방식은 조금 달랐다.
builder라는 것을 이용해야 한다!.. 

리덕스 툴킷 공식 문서에도 이렇게 정의하라고 알려주고 있고,

스택 오버플로우에서도.. builder를 사용해야 함을 알려주고 있다. 낯설지만 사용해볼 수 밖에...

참고로 리덕스 툴킷의 타입스크립트 적용 관련 공식문서 항목은 아래 주소!..

https://redux-toolkit.js.org/usage/usage-with-typescript

 

 

그래서 완성된 코드는 이렇다.

const mediaSlice = createSlice({
  name: 'media',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(getSearchVideos.fulfilled, (state, { payload }) => {
      state.search = payload.items;
      state.nextPageToken = payload.nextPageToken;
    });
  },
});

툴킷으로 리팩토링 했으니 useSelector와 useDispatch도 따로 정의하여 사용해야 한다.

위에서 payload의 타입 중에 선택적으로 들어가는 값을 정해주었기 때문에 아래와 같이 호출하거나,

 useEffect(() => {
    dispatch(getSearchVideos({ channelId }));
  }, [dispatch]);

 

 

이런 식으로 payload 값을 주어 호출할 수 있었다.

useEffect(() => {
    const payload = {
      channelId: item.snippet.channelId,
      orderType: 'viewCount',
      results: 15,
    };

    dispatch(getSearchVideos(payload));
  }, []);

 

 

 

타입스크립트가 마냥 익숙하지 않다 보니 payload의 타입을 어떻게 줄 것인지 삽질을 많이 했던 것 같다!..
프로젝트 중인데 더 많은 시간을 쏟아붓지 않은 것이 다행이다. 😇

 

 

 

참고글

How to use createAsyncThunk with Typescript? How to set types for the `pending` and `rejected` payloads?

 

 

Redux Toolkit을 사용하여 간단하게 상태 관리하기,reselect, redux, react, immer, redux-action, FSA, react-redux 사