설치

Redux Toolkit

Redux Toolkit은 Redux 코어와 Redux 애플리케이션 구축에 필수적인 핵심 패키지(Redux Thunk, Reselect 등)를 포함합니다.

모듈 번들러나 Node 애플리케이션에서 사용할 수 있도록 NPM 패키지로 제공됩니다:

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

이 패키지는 브라우저에서 직접 <script type="module"> 태그로 사용할 수 있는 사전 컴파일된 ESM 빌드를 포함합니다.

보조 패키지

React-Redux

React와 함께 사용하려면 React용 react-redux 바인딩도 필요할 것입니다

npm install react-redux

Redux 자체와 달리 Redux 생태계의 많은 패키지는 UMD 빌드를 제공하지 않으므로, 가장 편안한 개발 경험을 위해 Vite나 Webpack 같은 모듈 번들러 사용을 권장합니다.

Redux DevTools 확장 프로그램

Redux Toolkit의 configureStore는 Redux DevTools와의 통합을 자동으로 설정합니다. 스토어 상태와 액션을 확인하려면 브라우저 확장 프로그램을 설치해야 합니다:

Redux DevTools 확장 프로그램:
- Chrome용 Redux DevTools 확장 프로그램
- Firefox용 Redux DevTools 확장 프로그램

React를 사용 중이라면 React DevTools 확장 프로그램도 함께 설치하세요:

React DevTools 확장 프로그램:
- Chrome용 React DevTools 확장 프로그램
- Firefox용 React DevTools 확장 프로그램

React Redux 앱 생성

React와 Redux로 새 앱을 시작하는 권장 방법은 Vite용 공식 Redux+TS 템플릿을 사용하거나 Next.js의 with-redux 템플릿으로 새 Next.js 프로젝트를 생성하는 것입니다.

두 방법 모두 해당 빌드 도구에 맞게 Redux Toolkit과 React-Redux가 적절히 구성되어 있으며, Redux Toolkit의 여러 기능 사용법을 보여주는 작은 예제 앱이 포함되어 있습니다.

# Vite with our Redux+TS template
# (using the `degit` tool to clone and extract the template)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# Next.js using the `with-redux` template
npx create-next-app --example with-redux my-app

현재 공식 React Native 템플릿은 없지만, 표준 React Native와 Expo용으로 다음 템플릿을 추천합니다:

Redux 코어

redux 코어 패키지만 별도로 설치하려면:

# NPM
npm install redux

# Yarn
yarn add redux

번들러를 사용하지 않는다면 unpkg에서 파일에 접근하거나 다운로드하거나 패키지 관리자를 통해 사용할 수 있습니다.

Redux Toolkit​

보조 패키지​

React-Redux​

Redux DevTools 확장 프로그램​

React Redux 앱 생성​

Redux 코어​