Apakah itu seni bina Flux?

Question

Accepted Answer

**Flux** ialah pola seni bina (daripada Facebook) untuk menguruskan keadaan dengan **aliran data unidirectional (satu arah)**. Ia merupakan asas konseptual untuk Redux dan mempengaruhi kebanyakan pustaka pengurusan keadaan moden. Idea teras: data mengalir dalam satu arah yang tunggal dan boleh diramalkan.

## Kitaran unidirectional

```text
  Action  →  Dispatcher  →  Store  →  View
    ↑                                   │
    └───────────────────────────────────┘
         (user interaction creates a new Action)
```

```text
1. Action     — a plain object describing WHAT happened ({ type: 'ADD_TODO', text })
2. Dispatcher — a central hub that sends every action to the stores
3. Store      — holds state + logic; updates itself in response to actions
4. View       — renders from the store; user interactions dispatch new actions
```

Gelung ini adalah unidirectional yang ketat: pandangan tidak pernah mengubah stor secara langsung; mereka *menghantar tindakan*, yang mengalir melalui penghantar ke stor, yang kemudian mengemas kini pandangan.

## Mengapa aliran satu arah penting

```text
Two-way binding (data flows both ways) → hard to trace WHY state changed,
                                          updates cascade unpredictably.
Flux (one-way) → every change starts with an action → predictable, traceable,
                 easy to debug (you can log every action).
```

Masalah yang diselesaikan Flux (dalam aplikasi MVC yang besar) ialah aliran data dua arah yang kusut di mana mustahil untuk mengetahui apa yang berubah apa. Memaksa semua perubahan melalui tindakan yang dihantar menjadikan aliran data eksplisit dan boleh nyahcapaian.

## Flux vs Redux

```text
Flux:  multiple stores, a central dispatcher
Redux: a SINGLE store, no separate dispatcher (the store's dispatch + reducers),
       pure reducer functions — a simplification of Flux's ideas
```

Redux mengambil prinsip aliran unidirectional Flux dan mempermudahnya: satu stor, fungsi penurun tulen daripada stor-dengan-logik, dan tiada penghantar eksplisit.

## Warisan yang kekal

```text
Unidirectional data flow is now standard — Redux, Vuex/Pinia, NgRx, Zustand,
and even React's own state model all embody "actions/events flow one way."
```

## Mengapa ini penting

Flux memperkenalkan prinsip **aliran data unidirectional** yang mendasari hampir semua pengurusan keadaan moden.

Pemahaman ini menjelaskan *mengapa* Redux dan alat serupa disusun cara mereka (hantar tindakan → penurun/stor kemaskini → pandangan render semula) dan *mengapa* aliran satu arah lebih disukai: ia menjadikan perubahan keadaan boleh diramalkan, dapat dijejaki, dan boleh nyahcapaian.

Walaupun anda tidak pernah menggunakan "Flux klasik", ideanya yang teras ialah asas konseptual seluruh ekosistem.