このページは PageTurner AI で翻訳されました(ベータ版)。プロジェクト公式の承認はありません。 エラーを見つけましたか? 問題を報告 →
インストール
Redux Toolkit
Redux ToolkitはReduxコアライブラリに加え、Reduxアプリケーション構築に不可欠な主要パッケージ(Redux ThunkやReselectなど)を含んでいます。
モジュールバンドラーやNode.jsアプリケーションで使用する場合、NPMパッケージとして提供されています:
# NPM
npm install @reduxjs/toolkit
# Yarn
yarn add @reduxjs/toolkit
このパッケージにはプリコンパイルされたESMビルドが含まれており、ブラウザで直接<script type="module">タグとして使用できます。
補助パッケージ
React-Redux
Reactと併用する場合は、React用バインディングライブラリreact-reduxも必要になるでしょう。
npm install react-redux
Redux本体とは異なり、Reduxエコシステムの多くのパッケージはUMDビルドを提供していません。そのため、快適な開発体験のためにはViteやWebpackなどのモジュールバンドラーの使用を推奨します。
Redux DevTools拡張機能
Redux ToolkitのconfigureStoreはRedux DevToolsとの連携を自動的に設定します。ストアの状態やアクションを確認するにはブラウザ拡張機能のインストールが必要です:
- Redux DevTools拡張機能:
Reactを使用する場合は、React DevTools拡張機能もインストールすると良いでしょう:
- 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でファイルにアクセスし、ダウンロードするかパッケージマネージャーで参照できます。