LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

Reactの状態管理ライブラリー「Recoil」で非同期通信によるデータ読み込み

テクニック

Reactの状態管理ライブラリー「Recoil」で非同期通信によるデータ読み込み

前回の記事でReactの状態管理ライブラリーの「Recoil」について、公式のチュートリアルを元に少し触れてみました。
RecoilによってReactでネックの一つとなる状態管理が便利になることがわかりましたが、
今回はさらにRecoilの売りの一つである非同期通信によるデータの扱いについて触れてみました。

実際のWEBアプリでは、ベースとなるデータや保存されたデータを予め読み込んで表示することがほとんどです。
そのため、状態管理においても、非同期通信をともなうデータの処理が要になってきます。

前回のデモでTodoリストを作りましたが、初期では何もデータがない状態でした。
今回は、初期状態として非同期通信により情報を読み込み、表示する方法を試してみました。

↓作ってみたもの
DEMO

方法

前回はTodoListの初期値をからの配列として設定していましたが、
非同期通信で読み込んだ値を初期値に利用したい場合、
atom() の default に selector() による処理を指定します。

初期値を静的に指定する場合

初期値を非同期通信で取得したデータにする場合

この例では、selector() 内で axios で取得したデータを一部処理して atom() の default に返す処理をしています。

ポイントは、selector() の get の関数を async をつけた非同期関数としているところです。

また、非同期通信にはエラーがつきものなので、try catch によるエラーの例外処理を行っています。

読込中の出し分け

<TodoList />を<React.Suspence />で囲み、fallbackに読込中の要素を指定することで、
通信前の状態を簡単に指定することができます。

また、<ErrorBoundary />を定義し、エラーが起こった場合の表示も準備しておくことで、例外の表示にも対応しておきます。

表示だ仕分けのために新たに状態管理を追加する必要がないので、
わかりやすくていいなと個人的には感じました。

参考にさせていただいたサイト

Asynchronous Data Queries | Recoil

Error Boundaries – React

2010年代も終わるのでaxiosについて確認しておきたい – Qiita

Reactアプリにおける非同期通信エラー処理の実装案 | Hypertext Candy

Error Boundaries | React TypeScript Cheatsheets

reactjs – How to properly type a React ErrorBoundary class component in Typescript? – Stack Overflow

 

今回のDEMO App.tsx のコード全文

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。