Unstated Next を使用して、かつ複数のコンテキストを結合するサンプル プロジェクト。
Create React App のボイラープレートをベースとして、コンテキスト上の状態操作コントロールを追加しています。
git clone https://github.com/danmaq/react-un-practice.git
cd react-un-practice
npm ci
npm start
画面には Create React App のボイラープレートの他、下部にカウンター表示とログ表示、そしてそれらを操作するためのコントロール群があります。
Set counter:テキストボックスを編集すると、速やかにその値でカウンターの値を上書きします。+1ボタンを押下すると、カウンターの値を +1 します。Fetch to “api.github.com”ボタンを押下すると、GitHub API サーバーへ GET 接続し、リポジトリ一覧の JSON をダウンロード＆パースして、そのまま破棄します。- この際、ダウンロードの所要時間と、カウンターの値をログに蓄積します。
Clear the Historyボタンを押下すると、ログをクリアします。
本サンプル プロジェクトは 2 種類、合計 4 つのコンテキストで構成しています。
- カウンター: 一つの数値を持ちます。
- リデューサー: カウンターの保持・設定のみを担保します。
- アクション: カウンターのインクリメント・上書きのエンドポイントを担保し、リデューサーに伝えます。
- フェッチ: 通信の所要時間のログを蓄積します。
- リデューサー: 通信ログの保持・追加・消去のみを担保します。
- アクション: 非同期的に通信を行い、その結果とカウンター値の記録をリデューサーに伝えます。
大規模 React プロジェクトでは、ストアとコンポーネントを分割して設計しているのが一般的です。 中でも Redux など一部の状態コンテナは、ストアをさらにリデューサーとアクションに分割していますが、React 標準の Context API やそのごく薄いラッパーである Unstated Next ではその仕組みがなく、自前で用意する必要があります。また、これらは複数のコンテキストを用意すると、その間の結合が難しくなるため、コンテキストが肥大化した場合、分割に慎重な設計が必要となります。
そこでこのサンプル プロジェクトでは、コンテキストをリデューサーとアクションとで明確に分離し、アクションから全てのリデューサーを参照できる仕組みを実装しています。
| 部位 | 値の保持 | 副作用 | 非同期処理 | 説明 |
|---|---|---|---|---|
| リデューサー | ◎※1 | △※2 | × | 値保持のみに特化したコンテキスト |
| アクション | △※2 | ◎ | ◎ | 値保持以外の様々な副作用を伴うコンテキスト |
| コンポーネント | ○※3 | ○※3 | ○※3 | レンダリングのための DOM 構造 |
- ※1: リデューサー形式による保持のみ許容。
- ※2: 可読性や保守性の観点上、強く非推奨。
- ※3: そのコンポーネントのみで完結するローカルなもののみ可。
| 参照元＼参照対象 | リデューサー | アクション | コンポーネント |
|---|---|---|---|
| リデューサー | △※1 | × | × |
| アクション | ◎ | △※1 | × |
| コンポーネント | ○※2 | ◎ | - |
- ※1: 登録順序によっては可能ですが、保守性の観点上、極力避けてください。
- ※2: 可読性の観点上、アクションを経由して参照することを推奨します。
MIT