Redux Toolkit ...

서론

리덕스 툴킷을 사용해보기로 했습니다..!! 기존의 react-query를 활용해서 작업을 진행하려고 했지만... 그래도 Redux에 대한 지식이 많이 부족하기 때문에 차근차근 상태관리를 공부하려고 합니다. 기존의 Redux에서 업그레이드 된 버전이 Redux Toolkit이고 조금 더 편하게 상태관리를 하고자 업그레이드 되었다고 합니다. 공식 홈페이지에서도

"Why Redux Toolkit is How To Use Redux Today"

라고 나와있습니다.

또한,

• "저장소를 설정하는 것이 너무 복잡하다"
• "쓸만하게 되려면 너무 많은 패키지들을 더 설치해야 한다"
• "보일러플레이트 코드를 너무 많이 필요로 한다"

Redux Toolkit은 우리의 코드를 더 좋고 유지보수하기 쉽게 업그레이드 되었다고 합니다!! 그리고 Redux Toolkit을 사용하기를 강력하게 권장합니다. 그래서 리덕스를 공부하려면 최근에 나온 Redux Toolkit을 사용하고자 마음에 먹었습니다..

 

나의 코드

우선 제로베이스 포켓몬 예제, 제로베이스 2차과제를 통해서 Redux Toolkit을 공부하고자 합니다. 포켓몬 예제의 경우 따라하면서 어느정도의 기본 틀에대해 공부해갔다면 2차과제를 통해 직접 실습을 해봤습니다..!

 

1. configureStore()

스토어를 구성하는 함수 configureStore입니다. createStore를 감싸서 쓸만한 기본값들과 단순화된 설정을 제공합니다. 리듀서 조각들을 자동으로 합쳐주고, 기본 제공되는 redux-thunk를 포함해서 우리가 지정한 미들웨어 함수를 더해주고, Redux Devtools 확장을 사용할 수 있게 합니다.

 

import { configureStore } from "@reduxjs/toolkit"
import { storeReducer } from "./storeSlice"

export const store = configureStore({
  reducer: { store: storeReducer },
})

export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch

 

2. createSlice()

조각 이름과 상태 초기값, 리듀서 함수들로 이루어진 객체를 받아 그에 맞는 액션 생산자와 액션 타입을 포함하는 리듀서 조각을 자동으로 만들어줍니다.

 

const storeSlice = createSlice({
  name: "store/fetchStore",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(
      fetchStore.fulfilled,
      (state, action: PayloadAction<StoreListType>) => {
        state.fakeStore = action.payload
      },
    )
  },
})

extraReducers는 createSlice가 생성한 액션 타입 외 다른 액션 타입에 응답할 수 있도록 합니다. 슬라이스 리듀서에 맵핑된 내부 액션 타입이 아니라, 외부의 액션을 참조하려는 의도를 가지고 있습니다.

 

3. createAsyncThunk

createAction의 비동기 버전을 위해서 제안되었습니다. 액션 타입 문자열과 프로미스를 반환하는 함수를 받아 pending / fullfilled / rejected 액션 타입을 디스패치해주는 thunk를 생성해줍니다.

 

export const fetchStore = createAsyncThunk("store/fetchStore", async () => {
  const response = await fetchStoreAPI()
  return response
})

 

정리

제가 준비한 것에 비해 아직 많이 부족한 내용입니다. API 호출이 제대로 되지 않는 상태에서 블로그에 정리를 해보았습니다만.. 해결이 되면은 추가적으로 Redux Toolkit에 대해 정리하고자 합니다. Redux를 단순한 상태 관리 도구라고 생각을 했고 사용하기 매우 복잡하다고 생각을 했습니다. 하지만 RTK에 대해 공부를 해본 결과 기존의 Redux보단 훨씬 사용하기 편해진건 분명합니다. 

 

간단한 정리

• 스토어 구성은 configureStore()를 사용하자
• 리덕스 로직을 구성할 때는 createSlice()를 사용하자
• 비동기 로직은 createAsyncThunk()를 사용하자

참고

• https://ko.redux.js.org/redux-toolkit/overview/
• http://blog.hwahae.co.kr/all/tech/tech-tech/6946/

Redux Toolkit (리덕스 툴킷)은 정말 천덕꾸러기일까?

Redux Toolkit: 개요 | Redux