メインコンテンツへスキップ

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を何か役に立つことをさせるためには、たくさんのパッケージを追加する必要がある」
  • 「Reduxは定型的なコードが多すぎる」

すべてのユースケースを解決することはできませんが、create-react-appやapollo-boostの精神に基づき、最も一般的なユースケースに対応し、余分な決定を下す必要性を減らす、推奨される公式ツールセットを提供できます。

Redux Toolkitを使用する理由​

Redux Toolkitは、推奨されるベストプラクティスを組み込み、優れたデフォルトの動作を提供し、間違いをキャッチし、よりシンプルなコードを書くことを可能にすることで、優れたReduxアプリケーションをより簡単に作成し、開発をスピードアップします。Redux Toolkitは、スキルレベルや経験に関係なく、すべてのReduxユーザーにとって有益です。新しいプロジェクトの開始時に追加することも、既存のプロジェクトでの段階的な移行の一部として使用することもできます。

Reduxを使用するためにRedux Toolkitを使用する必要はないことに注意してください。他のReduxラッパーライブラリを使用したり、すべての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：アクションタイプの文字列とPromiseを返す関数を受け入れ、そのPromiseに基づいてpending/fulfilled/rejectedのアクションタイプをディスパッチするThunkを生成します。
  • createEntityAdapter：ストアで正規化されたデータを管理するための再利用可能なリデューサーとセレクターのセットを生成します。
  • 使いやすさのために再エクスポートされた、ReselectライブラリのcreateSelectorユーティリティ。

Redux Toolkitには、RTK QueryデータフェッチングAPIもあります。RTK Queryは、Redux専用に構築された強力なデータフェッチングおよびキャッシングツールです。Webアプリケーションでのデータの読み込みの一般的なケースを簡略化するように設計されており、データフェッチングとキャッシングのロジックを手書きする必要がありません。

ドキュメント​

Redux Toolkitの完全なドキュメントは、https://redux-toolkit.dokyumento.jpで入手できます。