インストール

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-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 を使用して新しいアプリを開始する推奨方法は、公式の Redux+TS テンプレート for Vite を使用するか、Next の 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 にはこれらのテンプレートをお勧めします。

• https://github.com/rahsheen/react-native-template-redux-typescript
• https://github.com/rahsheen/expo-template-redux-typescript

Redux コア

reduxコアパッケージを単独でインストールするには

# NPM
npm install redux

# Yarn
yarn add redux

バンドラを使用していない場合は、unpkg でこれらのファイルにアクセス、ダウンロード、またはパッケージマネージャーをそれらに向けることができます。