當我們開始將狀態引入 UI 元件時，通常很容易做這樣的事情：
Svelte 中的簡單計數器範例：
<script>
let count = $state(0);
</script>
<button onclick={() => count++}>
clicks: {count}
</button>
我們在這裡使用 Svelte，但同樣的問題也適用於任何 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 來幫助完成此任務。
資訊和免責聲明：我們將使用作者創建的 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中文網其他相關文章！
