[Feature Update]: watch API behavior / watch APIの挙動

[uttk]

watch APIの挙動について

watch APIは、非同期処理の実行状態を常に監視し、状態に変更があればコンポーネントの描画更新する。

実行する非同期処理が実行中の場合は、read APIと同じように非同期処理を実行しない。また、read APIと同じようにフィールドに書くことが出来る。

read APIは、一度しか通信状況を反映しないが、watch APIは非同期処理の処理状態が変更されるたびに、コンポーネントを再描画する。

例えば、以下のソースコードで start APIを実行すると、read APIでは以下の流れになる。

1. 最初のマウント
2. 処理状態が完了なり、コンポーネントが再描画される
3. start APIで実行した非同期処理が完了になり、コンポーネントが再描画される。

しかし、watch APIでは以下のような流れで、4回描画更新される。

1. 最初のマウント
2. 処理状態が完了なり、コンポーネントが再描画される
3. start APIで実行した非同期処理が実行中になり、コンポーネントが再描画される。
4. start APIで実行した非同期処理が完了になり、コンポーネントが再描画される。

勿論、他の非同期処理があればより多く描画更新が発生するが、なるべく最小限になるようTrelaが管理するので、そこは気にしなくても良い。

使い方は、read APIと同じ。

const SampleComponent = () => {
  const { apis } = useTrela();

  const ref = apis.anyAsyncFunc(); // 非同期処理の参照を取得

  const [result, isLoading] = ref.watch();

  /* ... */
}

watch APIの型

type WatchAPI<T> = () => [ T |  null, boolean]

• 配列の0番目の値は、nullか非同期処理の結果値が入る。
• 配列の1番目の値は、その非同期処理が実行中かの真偽値を返す。
  • true : 実行中
  • false : 実行中でない