本文へスキップ

Redux Toolkitを使い始める

目的​

Redux Toolkitパッケージは、Reduxロジックを記述するための標準的な方法として設計されています。これはもともと、Reduxに関する3つの一般的な懸念事項に対処するために作成されました。

  • "Reduxストアの設定が複雑すぎる"
  • "Reduxで何か役に立つことをするには、多くのパッケージを追加する必要がある"
  • "Reduxはボイラープレートコードが多すぎる"

create-react-appの精神にのっとり、設定プロセスを抽象化し、最も一般的なユースケースを処理するツールを提供し、ユーザーがアプリケーションコードを簡素化できるいくつかの便利なユーティリティを含めることで、すべてのユースケースを解決することはできませんが、試みています。

Redux Toolkitには、"RTK Query"と呼ばれる強力なデータ取得およびキャッシング機能も含まれています。これは、別々のエントリポイントのセットとしてパッケージに含まれています。オプションですが、データ取得ロジックを手動で記述する必要性を排除できます。

これらのツールは、すべてのReduxユーザーにとって有益です。初めてのプロジェクトを設定する全く新しいReduxユーザーであっても、既存のアプリケーションを簡素化したい経験豊富なユーザーであっても、Redux ToolkitはReduxコードの改善に役立ちます。

インストール​

React Reduxアプリの作成​

ReactとRedux Toolkitを使用して新しいアプリを始める推奨される方法は、公式のRedux Toolkit + TSテンプレート for Viteを使用するか、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 Toolkitは、モジュールバンドラーまたはNodeアプリケーションで使用するために、NPMのパッケージとして利用できます。

npm install @reduxjs/toolkit

Reactバインディングが必要な場合

npm install react-redux

このパッケージには、ブラウザで<script type="module">タグとして直接使用できる、事前にコンパイルされたESMビルドが含まれています。

含まれるもの​

Redux Toolkitには、これらのAPIが含まれています。

  • configureStore()：簡素化された構成オプションと優れたデフォルトを提供するためにcreateStoreをラップします。スライスreducerを自動的に組み合わせ、指定したReduxミドルウェアを追加し、デフォルトでredux-thunkを含み、Redux DevTools Extensionの使用を有効にします。
  • createReducer()：switch文を書く代わりに、アクションタイプとケースreducer関数のルックアップテーブルを指定できます。immerライブラリを自動的に使用して、state.todos[3].completed = trueのような通常の変更可能なコードで、より単純な不変の更新を記述できます。
  • createAction()：指定されたアクションタイプの文字列に対してアクションクリエーター関数を生成します。
  • createSlice()：reducer関数のオブジェクト、スライス名、初期状態の値を受け取り、対応するアクションクリエーターとアクションタイプを持つスライスreducerを自動的に生成します。
  • combineSlices()：複数のスライスを単一のreducerに組み合わせ、初期化後にスライスの「遅延読み込み」を可能にします。
  • createAsyncThunk：アクションタイプの文字列とPromiseを返す関数を受け取り、そのPromiseに基づいてpending/fulfilled/rejectedアクションタイプをディスパッチするthunkを生成します。
  • createEntityAdapter：ストアで正規化されたデータを管理するための、再利用可能なreducerとセレクターのセットを生成します。
  • ReselectライブラリからのcreateSelectorユーティリティは、使いやすさのために再エクスポートされています。

RTK Query​

RTK Queryは、@reduxjs/toolkitパッケージ内のオプションのアドオンとして提供されています。これは、データの取得とキャッシングのユースケースを解決するために特別に構築されており、アプリのAPIインターフェースレイヤーを定義するためのコンパクトで強力なツールセットを提供します。これは、ウェブアプリケーションでデータをロードする一般的なケースを簡素化し、データの取得とキャッシングのロジックを手動で記述する必要性を排除することを目的としています。

RTK Queryは、そのアーキテクチャに内部的にReduxを使用し、実装にはRedux Toolkitコアの上に構築されています。ReduxとRTKの知識はRTK Queryを使用するために必要ありませんが、それらが提供する追加のグローバルストア管理機能をすべて検討し、Redux DevToolsブラウザ拡張機能をインストールすることをお勧めします。これはRTK Queryと完全に連携して、リクエストとキャッシュの動作のタイムラインをトラバースおよび再生できます。

RTK Queryは、コアRedux Toolkitパッケージのインストールに含まれています。以下の2つのエントリポイントのいずれかから利用できます。

import { createApi } from '@reduxjs/toolkit/query'

/* React-specific entry point that automatically generates
   hooks corresponding to the defined endpoints */
import { createApi } from '@reduxjs/toolkit/query/react'

含まれるもの​

RTK Queryには、これらのAPIが含まれています。

  • createApi()：RTK Query機能の中核。エンドポイントのセットを定義し、データの取得方法、データの取得と変換方法の構成を含む、一連のエンドポイントからデータを取得する方法を記述できます。ほとんどの場合、これはアプリごとに一度だけ使用し、「ベースURLごとに1つのAPIスライス」というルールに従う必要があります。
  • fetchBaseQuery()：fetchをラップした小さなラッパーで、リクエストを簡素化することを目的としています。ほとんどのユーザーがcreateApiで使用する推奨されるbaseQueryとして意図されています。
  • <ApiProvider />：Reduxストアがまだない場合、Providerとして使用できます。
  • setupListeners()：refetchOnMountとrefetchOnReconnectの動作を有効にするために使用されるユーティリティです。

RTK Queryの詳細、解決する問題、使用方法については、RTK Query概要ページを参照してください。

Reduxの学習​

Reduxの学習に役立つさまざまなリソースをご用意しています。

Redux Essentialsチュートリアル​

Redux Essentialsチュートリアルは、「Reduxを正しく使う方法」を教えるトップダウン型のチュートリアルで、最新の推奨APIとベストプラクティスを使用しています。まずはここから始めることをお勧めします。

Redux Fundamentalsチュートリアル​

Redux Fundamentalsチュートリアルは、「Reduxの仕組み」を基礎から抽象化なしで、そして標準的なReduxの使用パターンが存在する理由を教えるボトムアップ型のチュートリアルです。

Learn Modern Reduxライブストリーム​

ReduxのメンテナーであるMark Eriksonが、「Learn with Jason」ショーに出演し、現代のReduxの使い方を説明しました。このショーでは、TypeScriptでRedux ToolkitとReact-Reduxフック、新しいRTK Queryデータ取得APIを使用する方法を示すライブコーディングされたサンプルアプリが含まれています。

「Learn Modern Redux」ショーのノートページで、トランスクリプトとサンプルアプリソースへのリンクを参照してください。

ヘルプとディスカッション​

#reduxチャンネル of the Reactiflux Discordコミュニティは、Reduxの学習と使用に関するすべての質問のための公式リソースです。Reactifluxは、交流し、質問をし、学ぶのに最適な場所です。ぜひご参加ください！

#reduxタグを使用してStack Overflowで質問することもできます。

最終更新日