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

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 で完全な例を参照してください

結論

状態ロジックを UI コンポーネントに直接実装すると、ロジックの再利用やテストが難しくなります。

Reactables を使用して状態ロジックをリアクティブにプログラムし、個別にテストできます。これにより、ビュー層とロジック層の両方で再利用性の高いリアクティブ状態ロジックのユニットが生成されます。

ここでは単純な反例を示しましたが、Reactable は拡張可能であり、より複雑な状態管理シナリオ (つまり、データのフェッチ、フォームなど) に合わせて構成できます。詳細については、ドキュメントをご覧ください。

以上がリアクティブ プログラミングによる再利用可能、拡張可能、テスト可能な状態ロジック。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。