RecoilのLoadableとRefresherでデータの非同期取得状況の表示周りをスッキリ

recoil-loadable-example - Snack

Recoilは素晴らしいというお話。

以下のような、ニュースの記事を並べて表示するアプリを考える。

各記事はインターネット経由等で非同期で読み込む必要があり、それぞれ「読み込み中」「読み込み成功」「読み込み失敗」の状態が付随する。

一番上の記事は読み込みに失敗してしまったようだ。

「再読み込み」ボタンを押して再読み込みさせる。

ちゃんと読み込まれた!

このようなものを実装する時に役立つのがRecoilの useRecoilValueLoadable と useRecoilRefresher_UNSTABLE である。

Loadable

まず、useRecoilValueLoadableを使用すると、各情報に読み込み状態を付随させることができる。具体的には

const xState = selector( 記事を非同期で読み込んで返す )
const x = useRecoilValue(xState)
// 値 x が取れた

であるところ、この useRecoilValueLoadable を使うだけで

const xState = selector( 記事を非同期で読み込んで返す )
const xLoadable = useRecoilValueLoadable(xState)

// xLoadable.stateで読み込み状態を取得
// xLoadable.contentsで読み込んだ結果を取得

という風に、特に追加のコーディングもせず読み込み状態をすぐ知れるようになる。

これは大変画期的な機能である。Reduxでこの機能を実装するとなると、

1. store内に fetchStatus という変数を設ける。

2. Action及びAction Creatorを3種類(「読み込み中」「読み込み成功」「読み込み失敗」)定義する。

3. ミドルウェアでの非同期処理の結果に応じて、これら3種類のActionが適切にdispatchされるようにする。

4. 3種のActionに対応するReducerをこれまた3種作り、それぞれfetchStatusを変更するようにする。

という風に超面倒くさかった。さようなら、Redux。

Refresher

Refresherを作り、これを呼び出すと、記事を非同期で読み込む処理をもう一回やってくれる。

詳しくはこちらをご覧ください

今回紹介したニュース記事を表示するミニアプリのソースコードです。

recoil-loadable-example - Snack

疑問

1. 今回実装した「記事を更新」以外に「4つの記事をまとめて更新」という機能はどうやって実装すればいいのだろうか？

2. 「読み込み中」「読み込み成功」「読み込み失敗」以外のものとして、「読み込む前」というアイドル状態を作るにはどうすればいいのだろうか？