Redux Toolkit - Redux를 더 쉽게 사용하기 위한 방법

TIL 23. 11. 28

Redux Toolkit이란?

Toolkit이란 어떤 일을 할 때 사용하는 도구(Tool)과 이 도구를 간편하게 쓰기 위한 세트(Kit), 즉 도구들의 모음을 뜻한다. Redux를 더 쉽게 사용할 수 있도록 도와주는 것이 바로 Redux Toolkit이다. 왜 Redux Toolkit을 사용해야 할까?

Redux에 대한 불만

• Redux 스토어를 설정할 때 초기 상태와 리듀서, 미들웨어 등을 정의하고 조합한다. 코드를 모듈화하고 유지보수성을 높이기 위해 Redux 스토어 설정을 여러 파일에 나눈다. (이를 해결하기 위한 ducks 패턴)
  • Redux 스토어 환경 설정이 복잡하다.
• Redux를 사용하면 액션 타입과 액션 생성자 함수를 정의하고, 리듀서 작성, 스토어 생성하는 등의 과정이 필요하다.
  • Redux를 사용하기 위해 작성해야 하는 코드의 양이 너무 많다.
• Redux를 편하게 사용하기 위해 액션을 관리하는 redux-actions, 불변성을 지키기 위해 immer, 상태 변화 추적 redux-logger, 비동기 작업을 처리하기 위한 redux-thunk 등을 설치한다.
  • Redux를 쉽게 사용하기 위해 설치하는 패키지가 많아졌다.

Redux팀은 이러한 불만을 수용하여 코드를 더 적게 사용하고 Redux를 편하게 쓰기 위한 기능들을 흡수해 Redux Toolkit을 만들었다.

Counter를 통해 알아보는 Redux와 Redux Toolkit 코드 비교

Counter 예제를 통해 Redux와 Redux Toolkit을 사용했을 때의 차이를 살펴보자.

store 설정 비교

• 기존의 Redux store
  • combineReducers: 여러 개의 리듀서로 단일 루트 리듀서를 생성
  • createStore: 단일 리듀서로 Redux 스토어 생성

• Redux Toolkit
  • configureStore 파라미터 목록
    • reducere: 여러 개의 슬라이스 리듀서로 단일 루트 리듀서를 생성 (내부적으로 combineReducers 사용)
    • middleware: 사용할 미들웨어 목록
    • devTools: 리덕스 개발자 도구 on/off
    • preloadedState: 스토어 초기값 설정
    • enchaners: 스토어에 적용할 추가 미들웨어

큰 차이는 없지만 여러 개의 리듀서를 단일 리듀서로 생성하여 store를 생성하는 단계가 하나 줄었다.

Counter 코드 비교

• 기존의 Redux
  • 리듀서를 만들기 위해 액션과 액션 타입을 정의 (Human Error 방지)
  • Action Value, Action Creator, Reducer를 모두 직접 정의

• Redux Toolkit
  • createSlice 파라미터 목록
    • initialsState: 초기 상태 값
    • name: 슬라이스(모듈) 이름. 액션 타입의 prefix로 사용
    • reducers: 각 액션에 대한 리듀서 함수 정의
      • immer 라이브러리를 내장하고 있어 불변성을 유지하기 위한 코드를 작성하지 않아도 된다
    • extraReducers: 외부의 다른 액션 타입에 응답할 수 있도록 외부 리듀서를 정의
  • createSlice 반환 값
    • name: 슬라이스 이름
    • reducer: 리듀서 함수들
    • actions: 액션 생성자 함수
    • caseReducers: 각 액션에 대한 리듀서 함수 정의
    • getInitialState: 초기 상태 값에 접근
  • createSlice - 액션 생성자와 리듀서를 자동으로 생성

Action Value와 Action Creator를 이제 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐졌다. ➡ 코드 양 감소

리듀서 객체 안에서 만들어주는 함수가 리듀서의 로직이 되면서도 동시에 Action Creator가 된다. Action Value까지 함수의 이름을 따서 자동으로 만들어진다.

결론

configureStore 함수를 사용하여 스토어 설정이 간단해지고 createSlice 함수를 사용하여 액션과 리듀서를 한 번에 정의할 수 있었다.

또한, immer 라이브러리를 내부에서 사용하여 불변성을 신경쓰지 않아도 되며 디버깅에 매우 유용한 Redux devTools을 자동으로 활성화해준다.

Redux Toolkit을 사용하여 Redux의 구조나 패러다임을 모두 유지한 채 코드 양을 줄이고 ducks 패턴의 요소들을 어느정도 자동화할 수 있었다.

참고자료

• Redux Toolkit (리덕스 툴킷)은 정말 천덕꾸러기일까?
• Redux Toolkit을 활용한 React 상태 관리