透過反應式程式實現可重複使用、可擴展且可測試的狀態邏輯。

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。 increment 是 UI 可以呼叫來呼叫狀態變更的操作方法。

Svelte 有一個很好的內建方式來訂閱範本中的可觀察量，如 $count 範本變數所示。在任何 UI 框架中訂閱可觀察物件並不是非常困難，而且許多框架都有 API 來幫助完成此任務。

實作 RxCounter

資訊和免責聲明：我們將使用作者創建的 Reactables API。它是一個狀態管理解決方案，利用 RxJS 讓響應式程式設計變得更容易。

取得Reactables核心套件並建立RxCounter。

npm 我@reactables/core

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

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

RxBuilder 回傳一個 Reactable。

Reactable 是一個元組，其第一項是發出狀態變更的 RxJS Observable，第二項是用於觸發狀態更新的操作方法的字典。

狀態是反應性，這意味著狀態透過其reducer函數響應變化。當接收到由 UI 觸發的增量操作時，可反應 會做出反應 及其可觀察對象會發出新狀態。

注意 RxCounter 現在與視圖層完全解耦，可以在任何 UI 框架中使用！

測試計數器

為了測試 Reactable，我們訂閱它的可觀察狀態並呼叫它的操作方法來測試它的行為。我們可以斷言 observable 的發出值與所需的行為相符。

這可以透過 RxJS 內建的 Marble 測試來完成。

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

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

延長計數器

透過與視圖隔離的狀態邏輯，我們還可以擴展 RxCounter 的功能並建立一個具有雙倍計數能力的 RxDoubleCounter。

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

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

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

查看 StackBlitz 上的完整範例

結論

直接在 UI 元件中實作狀態邏輯會使邏輯更難重複使用和測試。

我們可以使用 Reactables 對狀態邏輯進行反應式程式設計並單獨測試它。這會產生一個反應式狀態邏輯單元，在視圖層和邏輯層中都具有高度可重複使用性。

我們在這裡做了一個簡單的反例，但是Reactables對於更複雜的狀態管理場景（即資料擷取、表單等...）是可擴展和可組合的。查看文件以了解更多！

以上是透過反應式程式實現可重複使用、可擴展且可測試的狀態邏輯。的詳細內容。更多資訊請關注PHP中文網其他相關文章！