Logik Keadaan Boleh Digunakan Semula, Boleh Diperluas dan Boleh Diuji dengan Pengaturcaraan Reaktif.

Keadaan dalam Komponen UI

Apabila kita mula memperkenalkan keadaan ke dalam komponen UI, ia sering menggoda untuk melakukan sesuatu seperti ini:

Contoh Kaunter Mudah dalam Svelte:

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

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

Masalah

Kami menggunakan Svelte di sini tetapi isu yang sama boleh digunakan dalam mana-mana rangka kerja UI.

Secara langsung, kami telah menggabungkan logik keadaan kami dengan komponen - fungsi kenaikan dikodkan terus dalam templat.

Dengan persediaan ini kami tidak boleh menggunakan semula logik pembilang dalam:

• komponen UI lain
• logik perniagaan lain yang memerlukan kaunter
• rangka kerja UI lain

Kami juga tidak boleh menguji logik pembilang tanpa memaparkan komponen. Jika komponen mempunyai fungsi lain yang digabungkan dengannya, mengasingkan logik pembilang tidak akan dapat dilakukan.

Penyelesaian:

Asingkan logik keadaan daripada komponen UI supaya ia boleh dilaksanakan dan diuji secara bebas. Ini akan menjadikan logik lebih boleh digunakan semula dan komponen UI hanya perlu mendengar perubahan keadaan dan membuat. Pertimbangkan perkara berikut:

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

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

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

Lihat contoh penuh di StackBlitz

Jika anda bandingkan di atas dengan contoh asal kami, semua logik untuk kaunter kini terkandung dalam RxCounter (kami akan tunjukkan pelaksanaannya kemudian).

count ialah RxJS Observable yang mengeluarkan keadaan kiraan baharu. kenaikan ialah kaedah tindakan yang boleh dipanggil oleh UI untuk menggunakan perubahan keadaan.

Svelte mempunyai cara terbina dalam melanggan yang boleh diperhatikan dalam templat seperti yang dilihat dengan pembolehubah templat $count. Melanggan sesuatu yang boleh diperhatikan dalam mana-mana rangka kerja UI tidaklah begitu sukar dan banyak rangka kerja mempunyai API untuk membantu mencapainya.

Melaksanakan RxCounter

Maklumat dan Penafian: Kami akan menggunakan API Reactables yang dicipta oleh pengarang. Ia adalah penyelesaian pengurusan negeri yang memanfaatkan RxJS untuk menjadikan pengaturcaraan reaktif lebih mudah.

Dapatkan Pakej Teras Reactables dan buat RxCounter.

npm i @reactables/core

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

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

RxBuilder mengembalikan Reactable.

Reactable ialah tuple dengan item pertamanya ialah RxJS Observable yang memancarkan perubahan keadaan dan item kedua ialah kamus kaedah tindakan untuk mencetuskan kemas kini keadaan.

Keadaan adalah reaktif, bermakna keadaan bertindak balas kepada perubahan melalui fungsi pengurangnya. Apabila tindakan kenaikan yang dicetuskan oleh UI diterima, yang boleh bertindak balas bertindak balas dan yang boleh diperhatikan mengeluarkan keadaan baharu.

Nota RxCounter kini dipisahkan sepenuhnya daripada lapisan paparan dan boleh digunakan dalam mana-mana rangka kerja UI!

Menguji Kaunter

Untuk menguji Reactable, kami melanggan keadaan boleh diperhatikan dan menggunakan kaedah tindakannya untuk menguji kelakuannya. Kita boleh menegaskan nilai yang dipancarkan yang boleh diperhatikan sepadan dengan kelakuan yang diingini.

Ini boleh dilakukan dengan Ujian Marmar terbina dalam RxJS.

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

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

Memanjangkan Kaunter

Dengan logik keadaan yang diasingkan daripada paparan, kami juga boleh melanjutkan fungsi RxCounter dan mencipta RxDoubleCounter yang mempunyai keupayaan untuk menggandakan kiraan.

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

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

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

Lihat contoh penuh di StackBlitz

Kesimpulan

Melaksanakan logik keadaan secara langsung dalam komponen UI menjadikan logik lebih sukar untuk digunakan semula dan diuji.

Kami boleh memprogramkan logik keadaan secara reaktif dengan Reactables dan mengujinya secara berasingan. Ini menghasilkan unit logik keadaan reaktif yang sangat boleh digunakan semula dalam kedua-dua lapisan paparan dan logik.

Kami melakukan contoh kaunter yang mudah di sini, tetapi Reactables boleh dikembangkan dan boleh digubah untuk senario pengurusan keadaan yang lebih kompleks (iaitu pengambilan data, borang dll...). Semak dokumen untuk mengetahui lebih lanjut!

Atas ialah kandungan terperinci Logik Keadaan Boleh Digunakan Semula, Boleh Diperluas dan Boleh Diuji dengan Pengaturcaraan Reaktif.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!