리덕스 툴킷(redux toolkit)

Redux 툴킷은 Redux 로직을 작성하기 위한 공식 권장 접근 방식이다. Redux 코어 를 둘러싸고 있으며 Redux 앱을 빌드하는 데 필수적이라고 생각하는 패키지와 기능이 포함되어 있다. Redux 툴킷은 제안된 모범 사례를 기반으로 하여 대부분의 Redux 작업을 단순화하고 일반적인 실수를 방지하고 Redux 애플리케이션을 더 쉽게 작성할 수 있도록 한다.

리덕스 툴킷으로 만들어진 카운터 앱 살펴보기

react-redux-toolkit 폴더를 만들자. 그리고 터미널에 다음 명령을 해주자.

npx create-react-app my-app --template redux-typescript

기본 소스 코드 살펴보기

그리고 다음도 설치해주어야 한다.

npm install @reduxjs/toolkit react-redux

Store 생성하기

<app/store.tsx>

React에 Redux 스토어 제공

저장소가 생성되면 src/index.js에서 애플리케이션 주위에 React-Redux Provider 를 배치하여 React 구성 요소에서 사용할 수 있도록 할 수 있다. 방금 만든 Redux 저 장소를 가져오고 주위에 Provider 를 배치하고 저장소를 prop으로 전달한다.

Redux State Slice 생성

src/features/counter/counterSlice.js라는 파일이 있다. 해당 파일에서 Redux Toolkit의 createSlice API를 가져온다.

Redux 툴킷을 사용하면 리듀서에서 "mutating" 로 직을 작성할 수 있다. 그것은 Immer 라이브러리를 사용하기 때문에 실제로 상태를 변경하지 않는다.
"초안(draft) 상태"에 대한 변경 사항을 감지하고 이러한 변경 사항을 기반으로 완전히 새로운 불변 (immutable) 상태를 생성한다.

REDUCER

리듀서는 애플리케이션 상태의 변경 사항을 결정하고 업데 이트된 상태를 반환하는 함수이다. 그들은 인수로 조치를 취하고 store 내부의 상태를 업데이트한다.

스토어에 Slice Reducer 추가

다음으로 카운터 슬라이스에서 리듀서 함수를 가져와서 스토어에 추가해야 한다. 리듀서 매개변수 내부에 필드를 정의함으로써 스토어에 이 슬라이스 리듀서 함수를 사용 하여 해당 상태에 대한 모든 업데이트를 처리하도록 지시한다.

React 컴포넌트에서 Redux State 및 Actions 사용

useSelector : useSelector를 사용하여 저장소에서 데이터를 읽는다.
useDispatch : useDispatch를 사용하여 Action을 전달할 수 있다.

리덕스 툴킷 더 자세히 알아보기(APIs)