非同期読み書きに対応するRecoil+Reactの構造提案①

Recoilを勉強してみて色々と考えている。非同期的な書き込み処理、読み込み処理をどう実装すればいいのだろうか。

概要

書き込み

1. Componentでユーザーが何かする。

   1. ボタンを押したり

   2. Enterキーを押したり

2. Component が Action を同期的に呼び出す。

3. Action が API Gateway を同期的に呼び出すと同時にハンドラーを設定する。

   1. then

   2. catch

4. API Gateway が API へ非同期的に書き込み処理を始める。

5. API Gateway が書き込み結果を Action のハンドラーに送る。

6. Action のハンドラーが書き込み結果に基づいて Atom を変更する。

7. Component がAtom に従って表示内容を変える。

読み込み

1. Components が Selector の値を読もうとする。

2. Selector が API Gateway を非同期的に呼び出す。

3. API Gateway が API から非同期的に読み込み処理を始める。

4. Selectorsが読み込み処理の結果を返す。

5. Component が Selectorの返しているLoadableに従って表示内容を変える。

問題点

Recoilのeffectの出番がない。

Components, States, Actionsがひとつながりになっているので、分離してそれぞれテストをしづらい。

書き込みのActionsには細かく分けると2つの部分に分けられる。

1. API Gatewayを呼ぶ。

2. Statesを一括変更する。

Actionsでは一度に複数のStatesを変更することがある。例えばログインが成功すれば、

• 読み込み中かどうか←false

• ログインしているか←false

• エラーが発生しているか←false

• エラーメッセージ←空文字

といったStatesの変更が起きる。これらを2つに分けるか否か。