Redux Toolkit非公式翻訳（１） QuickStart

redux-toolkitドキュメント react redux redux-toolkit

Redux Toolkit私家版翻訳。
私の英語力は全然高くない(ちゃんと英語を訳したのは大学受験以来)ので、あまり正確な訳は期待しないでください。
元ページ： redux-toolkit.js.org

クイックスタート

目的

Redux ToolkitはReduxを記述する上での標準になることを意図して作られましたが、元々はReduxについての3つのよくある問題を解決するために作られました。

  • Redux storeの設定が複雑すぎる
  • Reduxを便利に使うためにはたくさんのパッケージを導入しないといけない
  • Reduxを使うにはたくさんのボイラープレートコードの記述が必要

全てのユースケースを解決することはできませんが、create-react-appや`apollo-boost のように、セットアップ手順を抽象化し、一般的なユースケースに対応し、アプリケーションのコードをシンプルにしてくれる便利なユーティリティを含むようなツールを提供することはできます。

これらの理由により、このパッケージはあえてスコープを限定しています。"Reduxモジュールを再利用可能でカプセル化されたものにする"といったようなコンセプトは考慮していませんし、データのキャッシュやフォルダ/ファイル構造、storeにおけるエンティティのリレーションなどといったものにも対応していません。

つまり、全てのReduxユーザにとって有用である必要があります。最初のプロジェクトをセットアップしている初心者や、既存のアプリケーションをシンプルにしたいと思っている経験者などにかかわらず、このツールはあなたのReduxコードをより良いものにしてくれます。

このツールに含まれるもの

Redux Toolkitには以下のAPIが含まれます。

  • configureStore(): シンプルな設定オプションや標準を提供するためにcreateStoreをラップしています。自動的にslice reducerを組み合わせ、redux-thunkのようなミドルウェアをデフォルトで追加し、Redux DevToolsを利用可能にします。
  • createReducer(): 自分でswitch式を書かずに済むように、reducer関数を呼び出すためのaction typesのセットを提供します。さらに、通常のミュータブルなコード（こんなコードです：state.todos[3].completed = true）でシンプルにイミュータブルな更新を行えるよう自動的にimmerというライブラリを使用します。
  • createAction(): action creater関数を生成します。関数にはtoString()が定義されており、action typeを使用するような場所で呼ぶことができます。
  • createSlice(): reducer関数のオブジェクトやslice名、stateの初期値を受け取り、action createrやaction typesに対応するslice reducerを自動で生成します。
  • createAsyncThunk: action type文字悦とpromiseを返す関数を受け取り、promiseに基づいてpending/resolved/rejectedというaction typeを* dispatchするthunkを生成します。
  • createEntityAdapter: storeで正規化されたデータを扱うための再利用可能なreducerを生成します。
  • createSelector: Reselectライブラリから再exportされたユーティリティです。

インストール

Create React Appを使う

ReactとRedux Toolkitをを使ったアプリケーションを立ち上げる際は、Ceate React Appに用意された公式テンプレートを使用することを推奨しています。これにはReact ReduxをReactのコンポーネントに統合しやすいというメリットがあります。

npx create-react-app my-app --template redux

既存のアプリに導入する

Redux Toolkitはモジュールバンドラーを使ってnpmパッケージとして利用したり、Nodeアプリケーションで使うことができます。

# npm
npm install [eduxjs/toolkit

# yarn
yarn add @reduxjs/toolkit

また、グローバル変数window.RTKが定義されたプリコンパイル済みのUMDパッケージとして利用することもできます。UMDパッケージは<script>タグで直接使用することができます。