BLoC & Patterns

ทิศทางเดียว เสมอ

BLoC (Business Logic Component) คือ pattern ที่สร้างบนกฎเข้ม: data ไหลไป ทิศทางเดียว UI ส่ง event (หรือเรียก method) เข้า; BLoC emit state ออก; UI rebuild จาก state เหล่านั้น UI ไม่เคย mutate state ตรง ๆ และ business logic ไม่เคยแตะ widget

sequenceDiagram
  participant UI
  participant Bloc
  UI->>Bloc: add(Event) / เรียก method
  Bloc->>Bloc: รัน business logic
  Bloc->>UI: emit(State ใหม่)
  UI->>UI: rebuild จาก State

Unidirectional data flow

วินัยทางเดียวนี้คือคุณค่าทั้งหมด เพราะ state เปลี่ยนได้ที่เดียวเท่านั้น ตอบสนองต่อ input ที่ชัดเจน app จึงคาดเดาได้และ test ได้ — คุณ feed event ให้ BLoC ใน test แล้ว assert ลำดับ state ที่แน่นอนได้ โดยไม่ต้องมี widget เลย

Cubit: ครึ่งที่ง่ายกว่า

library ของ BLoC มาพร้อมสองแบบ Cubit คือแบบที่ง่ายกว่า — ไม่มี event class คุณแค่เรียก method ที่ emit state ใหม่ เริ่มที่นี่

// state ไหลออก; method คือ input
class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);          // initial state

  void increment() => emit(state + 1); // emit state ใหม่
  void reset() => emit(0);
}

// ใน UI: BlocBuilder rebuild เมื่อมี state ใหม่ถูก emit
BlocBuilder<CounterCubit, int>(
  builder: (context, count) => Text('$count'),
);

// trigger input:
context.read<CounterCubit>().increment();

BLoC เต็มรูปเพิ่ม Event class ที่ชัดเจนระหว่าง UI กับ logic (add(IncrementPressed()) แทน increment()) การอ้อมนั้นแลกมาด้วย list ของทุก input ที่เป็นไปได้ที่ document และ log ได้ — มีค่าใน app ใหญ่ เกินจำเป็นใน app เล็ก

เมื่อไร ceremony ถึงคุ้ม

BLoC มีโครงสร้างมากกว่า setState หรือ Provider และโครงสร้างนั้นคือต้นทุนที่คุณจ่ายล่วงหน้า ซึ่งคืนทุนเมื่อ:

app ใหญ่ และคุณอยากได้ business logic เป็น unit ที่ test ได้ แยกจาก UI อย่างสมบูรณ์
state transition ซับซ้อน — event เยอะ, async flow, และคุณอยากให้ transition ชัดเจนและ trace ได้
ทีม ได้ประโยชน์จาก pattern เดียวที่ enforce ทั่ว codebase

สำหรับ app เล็กหรือ local state ของหน้าเดียว BLoC คือ over-engineering — setState หรือ ChangeNotifier ง่าย ๆ ชัดกว่า ทักษะคือการจับคู่ ceremony กับความซับซ้อน