reflect

@Effector/Reflect

☄แนบที่เก็บเอฟเฟกต์เพื่อตอบสนองส่วนประกอบโดยไม่มีตะขอ

ติดตั้ง

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

เริ่มต้นใช้งาน | เอกสาร API

แรงจูงใจ

จุดไตร่ตรองคืออะไร?

มันคือการออกแบบ API ที่ใช้รูปแบบแบบคลาสสิกเหมือนกันช่วยให้คุณเขียนส่วนประกอบที่ตอบสนองด้วยเอฟเฟกต์ในวิธีที่มีประสิทธิภาพและสามารถผสมได้

 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 ,
  } ,
} ) ;

ที่นี่เราได้แยกส่วนประกอบนี้ออกเป็นชิ้นส่วนเล็ก ๆ ซึ่งถูกสร้างขึ้นในวิธีที่สะดวกโดยใช้ผู้ให้บริการ reflect ซึ่งเป็นคำอธิบายที่ง่ายมากของ props -> values ซึ่งง่ายต่อการอ่านและแก้ไข

ด้วย @effector/reflect การอัปเดต $formValid ของเราจะทำให้ SubmentButton ได้รับการแสดงซ้ำอีกครั้งและสำหรับส่วนอื่น ๆ ทั้งหมดของ <UserForm /> ของเราจะมีงานทำปฏิกิริยา เป็นศูนย์ อย่างแท้จริง

หากต้องการเรียนรู้เพิ่มเติมโปรดอ่านบทความแรงจูงใจเต็มรูปแบบ

กระบวนการปลดปล่อย

1. ตรวจสอบร่างรุ่น
2. PRS ทั้งหมดควรมีฉลากที่ถูกต้องและชื่อที่มีประโยชน์ คุณสามารถตรวจสอบป้ายกำกับที่มีอยู่ได้ที่นี่
3. อัปเดตฉลากสำหรับ PRS และชื่อเรื่องถัดไปเรียกใช้การดำเนินการ Drafter Action ด้วยตนเองเพื่อสร้างร่างใหม่
4. ตรวจสอบเวอร์ชันใหม่และกด "เผยแพร่"
5. หากจำเป็นต้องตรวจสอบ "สร้างการสนทนาสำหรับรุ่นนี้"