ผสาน Flutter Hooks กับ BlocSignal ไร้รอยต่อผ่าน signals_hooks
ยกระดับการจัดการสถานะใน Flutter ให้กระชับและมีประสิทธิภาพยิ่งขึ้นด้วยการใช้ BlocSignal ร่วมกับ signals_hooks โดยไม่ต้องอาศัยแพ็กเกจตัวกลาง
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- การใช้ flutter_bloc แบบดั้งเดิมใน HookWidget มักพบปัญหาความซับซ้อนและต้องพึ่งพาโค้ดตัวกลาง
- BlocSignal สร้างขึ้นบน primitives ของ signals.dart โดย Rody Davis ทำให้สถานะเป็น ReadonlySignal โดยกำเนิด
- สามารถใช้ signals_hooks เพื่ออ่านค่าและตอบสนองต่อสถานะได้ทันทีโดยไม่ต้องติดตั้งแพ็กเกจตัวเชื่อมเพิ่ม
- ช่วยให้การจัดการ side-effects และการทำ selector ทำได้อย่างสะอาดตาและมีประสิทธิภาพสูง
การพัฒนาแอปพลิเคชัน Flutter โดยใช้ flutter_hooks มักช่วยให้โค้ดของวิดเจ็ตสั้นกระชับและอ่านง่ายขึ้นมากผ่านการแทนที่วงจรชีวิตของ StatefulWidget แบบเดิมด้วย hooks ประกาศอย่าง useState, useMemoized และ useEffect อย่างไรก็ตาม เมื่อนักพัฒนาพยายามผสาน flutter_bloc แบบคลาสสิกเข้ากับ HookWidget กลับพบอุปสรรคเนื่องจากสถานะของ BLoC แบบเดิมจะถูกส่งผ่านสตรีมแบบอะซิงโครนัส
ด้วยเหตุนี้ BlocSignal จึงเข้ามาเปลี่ยนกระบวนดับทัศน์นี้อย่างสิ้นเชิง โดยไม่เหมือนกับ BLoC ทั่วไปที่อัปเดตสถานะผ่าน microtask event queues แต่ BlocSignal สร้างพาร์ทเนอร์ต่อยอดจาก signals.dart ของ Rody Davis ทำให้ bloc.state กลายเป็น ReadonlySignal แบบเนทีฟทันทีโดยไม่ต้องพึ่งพาแพ็กเกจตัวแปลง custom flutter_bloc_signals_adapter แต่อย่างใด
ทำให้นักพัฒนาสามารถใช้ HookWidget เพื่อบริโภค ดึงค่า หรือตอบสนองต่อสถานะของ BlocSignal ได้ทันทีผ่านแพ็กเกจทางการอย่าง signals_hooks โดยการใช้ useSignalValue(bloc.state) หรือ useWatch(bloc.state) จะช่วยลงทะเบียนการพึ่งพาและทริกเกอร์การเรนเดอร์ใหม่แบบซิงโครนัสทันทีเมื่อ bloc.emit() ทำงาน
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
การใช้งาน Reactive State Management ใน Flutter ผ่าน Signals ถือเป็นอีกหนึ่งทางเลือกที่ทรงพลัง นอกเหนือจาก Stream หรือ ValueNotifier ทั่วไป จุดเด่นคือระบบการจัดการ Dependency ที่แม่นยำและการอัปเดตแบบซิงโครนัส ช่วยลดการเรนเดอร์วิดเจ็ตที่ไม่จำเป็น (Unnecessary Rebuilds) ได้อย่างยอดเยี่ยมเมื่อเทียบกับการจัดการสตรีมแบบดั้งเดิม
ในด้านการจัดการ Side-Effects เช่น การแสดง SnackBar หรือการทริกเกอร์การนำทาง ปกติจะต้องห่อหุ้ม UI ด้วย BlocListener หรือใช้ useBlocListener แต่เนื่องจาก BlocSignal อัปเดตแบบซิงโครนัส คุณจึงสามารถเขียน inline reactive side effects ผ่าน useSignalEffect ได้ทันที พร้อมฟีเจอร์ .stateValue ที่ช่วยให้เข้าถึงค่าสถานะได้อย่างสะดวกสะบาย
สำหรับการกรองการเรนเดอร์ใหม่ที่เคยต้องพึ่งพา BlocSelector หรือ useBlocSelector ในอดีต ตอนนี้สามารถทำได้อย่างสะอาดตาด้วย useComputed ซึ่งสร้าง derived signal แบบอินไลน์ พร้อมทั้งตัดการเรนเดอร์ซ้ำซ้อนออกได้อย่างชาญฉลาดเมื่อค่าผลลัพธ์ไม่มีการเปลี่ยนแปลงที่แท้จริง
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น