Redux-Toolkit

목적

1. Redux 저장소 구성이 너무 복잡하다.
2. Redux에서 유용한 작업을 수행하기위해서는 많은 패키지를 추가해야한다.
3. Redux에는 너무 많은 사용구 코드가 필요하다.

• 모든 문제점들을 모두 해결할 수는 없지만 기존 js로 작업시에는 redux-actions를 사용해서 작업하였었는데 기존보다 조금 더 편해진 정도였지 위의 문제점들은 그대로 가지고 있었다. 그래서 ts로 리팩토링을 진행하면서 리덕스를 어떻게해야 좀 더 깔끔하게 사용할지 고민하다가 redux-toolkit을 발견하고 redux코드를 개선하는데 많은 도움이 되었다. 그리고 ts의 지원도 굉장히 잘되어있어서 리팩토링과정에서 굉장히 유용했다.

개선후의 코드

• 화면 2개에 걸쳐 길게 작성된 코드를 더 깔끔하게 정리하였다.

설치

npm install @reduxjs/toolkit

포함된 api

• configureStore(): createStore단순화된 구성 옵션과 좋은 기본값을 제공하기 위해 래핑 합니다. 자동으로 슬라이스 리듀서를 결합하고, 제공하는 모든 Redux 미들웨어를 추가 redux-thunk하고, 기본적으로 포함 하고, Redux DevTools Extension을 사용할 수 있습니다.
• createReducer(): switch 문을 작성하는 대신 대소문자 감소 함수에 작업 유형의 조회 테이블을 제공할 수 있습니다. 또한 immer라이브러리 를 자동으로 사용하여 state.todos[3].completed = true.
• createAction(): 주어진 액션 유형 문자열에 대한 액션 생성자 함수를 생성합니다. 함수 자체가 toString()정의되어 있으므로 형식 상수 대신 사용할 수 있습니다.
• createSlice(): 리듀서 함수의 객체, 슬라이스 이름, 초기 상태 값을 받아 해당 액션 생성자와 액션 유형을 가진 슬라이스 리듀서를 자동으로 생성합니다.
• createAsyncThunk: 작업 유형 문자열과 약속을 반환하는 함수를 수락하고 pending/fulfilled/rejected해당 약속을 기반으로 작업 유형 을 전달하는 썽크를 생성합니다.
• createEntityAdapter: 스토어에서 정규화된 데이터를 관리하기 위해 재사용 가능한 리듀서 및 셀렉터 세트를 생성합니다.
• createSelector유틸리티 로부터 재 선택 라이브러리는, 사용의 용이성을 위해 재수출.

store

• 리팩토링과정에서 reudx-toolkit에서 제공하는 기능들로 스토어를 다시 생성하였다.
• useSelector로 컴포넌트에서 state를 가져올때 항상 타입설정을 해줘야하는 번거로움이 있어서 store에 커스텀으로 type도 추가된 selector를 생성하여 사용하였다.

출처

자료 : https://redux-toolkit.js.org/