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

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

Redux Toolkitとは​

Redux Toolkit は公式が提供する、オピニオンが組み込まれた、すぐに使える包括的な Redux 開発ツールセットです。Redux ロジックを記述する標準的な方法として設計されており、強く推奨されています。

ストアの設定、リデューサーの定義、不変更新ロジックといった一般的な Redux ユースケースを簡素化する複数のユーティリティ関数を提供します。手動でアクションクリエーターやアクションタイプを書くことなく、状態の「スライス」全体を一度に生成することも可能です。また、非同期ロジック用の Redux Thunk やセレクター関数記述用の Reselect など、広く利用されている Redux アドオンも含まれているため、すぐに使用できます。

インストール​

Redux Toolkit は、モジュールバンドラーや Node アプリケーションで使用できる NPM パッケージとして提供されています：

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

目的​

Redux コアライブラリは意図的にオピニオンを持たない設計です。ストアの設定方法、状態の内容、リデューサーの構築方法など、すべてを開発者が決定できます。

これは柔軟性を提供する点で優れていますが、常に必要とは限りません。時には、すぐに使える適切なデフォルト動作を備えた、最もシンプルな方法で始めたい場合もあります。あるいは、大規模アプリケーション開発において類似コードを繰り返し記述している場合、手書きコード量を削減したいと感じることもあるでしょう。

Redux Toolkit は当初、Redux に関する以下の3つの一般的な懸念を解決するために作成されました：

  • 「Redux ストアの設定が複雑すぎる」

  • 「実用的な機能を追加するのに多数のパッケージが必要」

  • 「Redux には定型コードが多すぎる」

すべてのユースケースを解決できるわけではありませんが、create-react-app や apollo-boost の精神に則り、一般的なユースケースを処理し追加判断を減らす公式推奨ツールセットを提供します。

Redux Toolkit を使用すべき理由​

Redux Toolkit は、推奨されるベストプラクティスを組み込み、適切なデフォルト動作を提供し、ミスを捕捉し、よりシンプルなコード記述を可能にすることで、優れた Redux アプリケーション開発を容易にし開発速度を向上させます。Redux Toolkit はスキルレベルや経験に関わらず全ての Redux ユーザーに有益です。新規プロジェクトの開始時や既存プロジェクトの段階的移行時に追加できます。

Redux を使用するために Redux Toolkit は必須ではないことに注意してください。他の Redux ラッパーライブラリを使用するアプリケーションや、すべてのロジックを「手書き」する既存アプリケーションも多数存在します。別のアプローチを好む場合は自由に選択してください。

しかしながら、全ての Redux アプリケーションで Redux Toolkit の使用を強く推奨します。

総合的に、初めてプロジェクトを設定する新しい Redux ユーザーであっても、既存アプリケーションを簡素化したい経験豊富なユーザーであっても、Redux Toolkit を使用することでコードの品質と保守性が向上します。

含まれる機能​

Redux Toolkit には以下が含まれます：

  • configureStore(): createStore をラップし、簡素化された設定オプションと適切なデフォルト値を提供します。スライスリデューサーの自動結合、提供された Redux ミドルウェアの追加、デフォルトでの redux-thunk の組み込み、Redux DevTools Extension の有効化が自動で行われます。

  • createReducer(): switch 文を書く代わりに、アクションタイプとケースリデューサー関数のルックアップテーブルを提供できます。さらに、immer ライブラリを自動的に使用し、state.todos[3].completed = true のような通常の変更コードでシンプルな不変更新を実現します。

  • createAction(): 指定されたアクションタイプ文字列のアクションクリエーター関数を生成します。関数自体に toString() が定義されているため、タイプ定数の代わりに使用できます。

  • createSlice(): リデューサー関数のオブジェクト、スライス名、初期状態値を受け取り、対応するアクションクリエーターとアクションタイプを持つスライスリデューサーを自動生成します。

  • createAsyncThunk: アクションタイプ文字列とプロミスを返す関数を受け取り、そのプロミスに基づいて pending/fulfilled/rejected アクションタイプをディスパッチするサンクを生成します。

  • createEntityAdapter: ストア内の正規化データを管理する再利用可能なリデューサーとセレクターのセットを生成します。

  • Reselect ライブラリからの createSelector ユーティリティ。利便性のため再エクスポートされています。

Redux Toolkit には RTK Query データ取得 API も含まれます。RTK Query は Redux 専用に構築された強力なデータ取得・キャッシングツールです。Web アプリケーションでのデータ読み込みの一般的なケースを簡素化し、データ取得とキャッシングロジックの手動作成を不要にします。

ドキュメンテーション​

Redux Toolkit の完全なドキュメントは https://redux-toolkit.js.org でご覧いただけます。