メインコンテンツへスキップ
非公式ベータ版翻訳

このページは 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ビルドを提供していません。そのため、快適な開発体験のためにはViteWebpackなどのモジュールバンドラーの使用を推奨します。

Redux DevTools拡張機能

Redux ToolkitのconfigureStoreRedux DevToolsとの連携を自動的に設定します。ストアの状態やアクションを確認するにはブラウザ拡張機能のインストールが必要です:

Reactを使用する場合は、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でファイルにアクセスし、ダウンロードするかパッケージマネージャーで参照できます。