reflect

@efektor/refleksi

☄️ Pasang toko efektor untuk bereaksi komponen tanpa kait.

Memasang

npm install @effector/reflect
# or
pnpm add @effector/reflect

Memulai | API Docs

Motivasi

Apa gunanya refleksi?

Ini adalah desain API yang, menggunakan pola seperti hoc klasik, memungkinkan Anda untuk menulis komponen bereaksi dengan efektor dengan cara yang efisien dan komposisi.

 import { reflect , variant } from '@effector/reflect' ;

export function UserForm ( ) {
  return (
    < FormCard >
      < Name />
      < LastName />
      < SubmitButton />
    </ FormCard >
  ) ;
}

const Name = reflect ( {
  view : Input ,
  bind : {
    value : model . $name ,
    onChange : model . nameChanged ,
  } ,
} ) ;

const LastName = reflect ( {
  view : Input ,
  bind : {
    value : model . $lastName ,
    onChange : model . lastNameChanged ,
  } ,
} ) ;

const SubmitButton = reflect ( {
  view : Button ,
  bind : {
    type : 'submit' , // plain values are allowed too!
    disabled : model . $formValid . map ( ( valid ) => ! valid ) ,
    onClick : model . formSubmitted ,
  } ,
} ) ;

Di sini kami telah memisahkan komponen ini menjadi bagian -bagian kecil, yang dibuat dengan cara yang nyaman menggunakan operator reflect , yang merupakan deskripsi yang sangat sederhana dari pemetaan props -> values , yang lebih mudah dibaca dan dimodifikasi.

Dengan @effector/reflect , pembaruan $formValid kami hanya akan menyebabkan SubmitButton dirender ulang, dan untuk semua bagian lain dari <UserForm /> kami akan benar-benar tidak ada pekerjaan reaksi.

Untuk mempelajari lebih lanjut, silakan baca artikel motivasi lengkap.

Proses rilis

1. Lihat rilis draft.
2. Semua PR harus memiliki label yang benar dan judul yang bermanfaat. Anda dapat meninjau label yang tersedia di sini.
3. Perbarui label untuk PR dan judul, selanjutnya jalankan secara manual Release Drafter Action untuk meregenerasi rilis draft.
4. Tinjau versi baru dan tekan "Publikasikan"
5. Jika diperlukan periksa "Buat diskusi untuk rilis ini"