Redux Toolkit 들어가기

2023년 1월부터 시작된 신규 프로젝트를 위해서 NEXT.js 프로젝트에 RTK Query를 사용하기로 결정했습니다.

 

그러려면 공홈 문서부터 봐야겠죠.

 

https://redux-toolkit.js.org/introduction/getting-started

Getting Started | Redux Toolkit

열심히 읽어봅니다.

---

우선, 리덕스 툴킷을 사용하는 목적을 먼저 언급하고 있습니다.

어떤 주제든 먼저 배경에 대해 설명하는게 먼저겠죠.

 

목적:

자. Redux Toolkit은 Redux 로직을 작성하는 표준 방법입니다. 

원래 Redux에 대한 일반적인 세가지 문제를 해결하기 위해 만들어졌습니다.

• Redux store를 구성하는 것이 너무 복잡하다.
• Redux를 유용하게 사용하기 위해 너무 많은 패키지를 추가해야 한다.
• Redux는 너무 많은 보일러플레이트 코드를 요구한다.

이를 'create-react-app'을 통해 일부 간소화할 수 있었습니다.

 

그리고 "RTK Query"를 통해 데이터 패치 및 캐싱 기능도 활용할 수 있습니다. 

별도의 엔트리 포인트(진입점) 세트로 포함되어 있죠. 데이터 패치 로직을 직접 작성할 필요가 없습니다.

 

결과적으로 Reduxt Toolkit은 Redux 코드를 개선하는데 도움을 줄 수 있습니다.

 

 

Redux Toolkit APIs:

1. configureStore()

간소화된 구성 옵션과 적절한 기본값을 제공하기 위해 createStore 를 래핑합니다. 

다음과 같이 여러 기능들을 제공합니다.

• 1.1. 슬라이스 리듀서 자동 결합
• 1.2. 우리가 제공한 모든 Redux 미들웨어 추가
• 1.3. redux-thunk 기본 포함
• 1.4. Redux DevTools Extension 사용 가능

2. createReducer()

switch 문을 작성하는 대신, case reducer 함수에 action 타입의 룩업(lookup) 테이블을 제공할 수 있습니다.

그리고 자동은 immer 라이브러리를 사용하여 "state.todos[3].competed = true"와 같은 일반적인 변경 코드로, 더 간단한 변경 불가(immutable) update를 작성할 수 있습니다.

3. createAction()

주어진 action 타입의 string에 대한 action 생성자 함수를 생성합니다.

함수 자체에 toString()이 정의되어 있어서 constant(상수) 타입 대신 사용할 수 있습니다.

4. createSlice()

리듀서 함수의 객체, 슬라이스 이름 및 초기 상태 값을 받아서, 해당 action 작성자 및 action 타입으로 슬라이스 리듀서를 자동을 생성합니다.

5. createAsyncThunk

action 타입 string과 promise를 반환하는 함수를 받아서, 해당 promise를 기반으로 "pending/fulfilled/rejected" action 타입을 dispatch하는 thunk를 생성합니다.

6. createEntityAdapter

store에서 정규화된 데이터를 관리하기 위해 재사용 가능한 reducer 및 selector 세트를 생성합니다.

 

---

설치와 리덕스 툴킷에 포함된 라이브러리는 다음 포스트에서 설펴보도록 하겠습니다.

 

감사합니다.