リアクティブプログラミングによる再利用可能、拡張可能、テスト可能な状態ロジック。-jsチュートリアル-php.cn

リアクティブプログラミングによる再利用可能、拡張可能、テスト可能な状態ロジック。

Barbara Streisand

リリース： 2024-11-30 07:07:10

オリジナル

695 人が閲覧しました

Reusable, Extensible and Testable State Logic with Reactive Programming.

UIコンポーネントの状態

UI コンポーネントに状態を導入し始めると、次のようなことをしたくなることがよくあります:

Svelte での簡単なカウンターの例:

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  clicks: {count}
</button>

ログイン後にコピー

問題

ここでは Svelte を使用していますが、同じ問題はどの UI フレームワークにも当てはまります。

最初から、状態ロジックとコンポーネントが緊密に結合されています。インクリメント機能はテンプレート内で直接コード化されています。

この設定では、次のカウンタロジックを再利用できません。

その他の UI コンポーネント
カウンターを必要とするその他のビジネスロジック
その他の UI フレームワーク

コンポーネントをレンダリングせずにカウンターロジックをテストすることもできません。コンポーネントに他の機能が結合されている場合、カウンターロジックを分離することはできません。

解決：

状態ロジックを UI コンポーネントから分離して、独立して実装およびテストできるようにします。これにより、ロジックがより再利用可能になり、UI コンポーネントは状態の変更をリッスンしてレンダリングするだけで済みます。次の点を考慮してください:

<script>
  import { RxCounter } from './RxCounter';

  const [count, { increment }] = RxCounter();
</script>

<button onclick={increment}>
  Count: {$count}
</button>

ログイン後にコピー

StackBlitz で完全な例を参照してください

上記を元の例と比較すると、カウンターのすべてのロジックが RxCounter にカプセル化されています (実装については後で示します)。

count は、新しいカウント状態を発行する RxJS Observable です。インクリメントは、状態変更を呼び出すために UI が呼び出すことができるアクションメソッドです。

Svelte には、$count テンプレート変数で見られるように、テンプレート内のオブザーバブルをサブスクライブする優れた方法が組み込まれています。どの UI フレームワークでもオブザーバブルをサブスクライブすることは、それほど難しいことではありません。多くのフレームワークには、これを実現するための API が用意されています。

RxCounterの実装

情報と免責事項: 著者が作成した Reactables API を使用します。これは、RxJS を活用してリアクティブプログラミングを容易にする状態管理ソリューションです。

Reactables コアパッケージを取得し、RxCounter を作成します。

npm i @reactables/core

import { RxBuilder } from '@reactables/core';

export const RxCounter = () =>
  RxBuilder({
    initialState: 0,
    reducers: {
      increment: (count) => count + 1,
    },
  });

ログイン後にコピー

RxBuilder は Reactable を返します。

Reactable は、状態変更を発行する RxJS Observable が最初の項目であり、状態の更新をトリガーするためのアクションメソッドの辞書が 2 番目の項目であるタプルです。

状態は リアクティブ です。これは、状態がリデューサー関数を介して変更に応答することを意味します。 UI によってトリガーされたインクリメントアクションが受信されると、リアクション可能反応し、そのオブザーバブルは新しい状態を出力します。

RxCounter はビュー層から完全に分離されており、任意の UI フレームワークで使用できることに注意してください。

カウンターのテスト

Reactable をテストするには、その状態監視可能オブジェクトをサブスクライブし、そのアクションメソッドを呼び出してその動作をテストします。オブザーバブルの出力値が望ましい動作と一致していると断言できます。

これは、RxJS に組み込まれた Marble Testing を使用して実行できます。

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  clicks: {count}
</button>

ログイン後にコピー

カウンターの拡張

ビューから分離された状態ロジックを使用して、RxCounter の機能を拡張し、カウントを 2 倍にする機能を持つ RxDoubleCounter を作成することもできます。

<script>
  import { RxCounter } from './RxCounter';

  const [count, { increment }] = RxCounter();
</script>

<button onclick={increment}>
  Count: {$count}
</button>

ログイン後にコピー

StackBlitz で完全な例を参照してください