Redux toolkit 이란?
툴킷은 말그대로 리덕스를 작성하여 전역 상태관리를 해줄 때, 리덕스를 좀 더 편리하게 쓰기 위해 제공해주는 도구모음이다. 툴킷을 이용하면 기존에 쓰던 action, state를 일일히 switch문에 등록해 쓰지 않아도 되고 slice라는 툴을 이용해서 압축해서 쓸 수 있다.
# NPM
npm install @reduxjs/toolkit
# Yarn
yarn add @reduxjs/toolkit패키지관리자를 통해 설치해 주면 된다.
toolkit에 사용 목적
"저장소를 설정하는 것이 너무 복잡하다"
"쓸만하게 되려면 너무 많은 패키지들을 더 설치해야 한다"
"보일러플레이트 코드를 너무 많이 필요로 한다"
공식문서에 따르면 툴킷을 사용하는 목적은 다음과 같은 문제점을 보완해주기 위해 만들어졌다. 기본 동작을 제공하고, 실수를 줄여주고, 더 간단한 코드를 작성하게 해 준다. 이를 통해 좋은 Redux 앱을 쉽고 빠르게 개발할 수 있게 해 준다. 코드를 더 좋고 유지보수하기 쉽게 만들어준다.
Redux toolkit 사용되는 메서드
configureStore(): createStore를 감싸서 쓸만한 기본값들과 단순화된 설정을 제공한다. 리듀서 조각들을 자동으로 합쳐주고, 기본 제공되는 redux-thunk를 포함해서 여러분이 지정한 미들웨어들을 더해주고, Redux DevTools 확장을 사용할 수 있게 한다.
createReducer(): switch 문을 작성하는 대신, 액션 타입과 리듀서 함수를 연결해주는 목록을 작성하도록 한다. 여기에 더해 immer 라이브러리를 자동으로 사용해서, state.todos[3].completed = true와 같은 변이 코드를 통해 간편하게 불변 업데이트를 할 수 있도록 한다.
createAction(): 주어진 액션 타입 문자열을 이용해 액션 생산자 함수를 만들어준다. 함수 자체에 toString() 정의가 포함되어 있어서, 타입 상수가 필요한 곳에 사용할 수 있다.
createSlice(): 조각 이름과 상태 초기값, 리듀서 함수들로 이루어진 객체를 받아 그에 맞는 액션 생산자와 액션 타입을 포함하는 리듀서 조각을 자동으로 만들어준다.
createAsyncThunk: 액션 타입 문자열과 프로미스를 반환하는 함수를 받아, pending/fulfilled/rejected 액션 타입을 디스패치해주는 thunk를 생성해준다. 이 메서드를 사용하면 호출될 때 사용할 함수를 만들 수 있다.
createEntityAdapter: 저장소 내에 정규화된 데이터를 다루기 위한 리듀서와 셀렉터를 만들어준다.
createSelector 유틸리티를 Reselect 라이브러리에서 다시 익스포트해서 쓰기 쉽게 해준다.
참고한 자료
