Apa itu arsitektur Flux?

Question

Accepted Answer

**Flux** adalah pola arsitektur (dari Facebook) untuk mengelola state dengan **aliran data unidirectional (satu arah)**. Ini adalah dasar konseptual untuk Redux dan mempengaruhi sebagian besar library state modern. Ide inti: data mengalir dalam satu arah yang dapat diprediksi.

## Siklus 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
```

Loop bersifat strictly one-directional: view tidak pernah memodifikasi store secara langsung; mereka *mengirim actions*, yang mengalir melalui dispatcher ke store, yang kemudian memperbarui view.

## 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 dipecahkan Flux (dalam aplikasi MVC besar) adalah aliran data yang kusut dan bidirectional di mana mustahil untuk mengetahui apa yang mengubah apa. Memaksa semua perubahan melalui action yang dikirim membuat aliran data eksplisit dan dapat di-debug.

## 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 menyederhanakannya: satu store, pure reducer functions, dan tidak ada dispatcher yang eksplisit.

## Warisan yang berkelanjutan

```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 praktis semua state management modern.

Memahaminya menjelaskan *mengapa* Redux dan tools serupa dibangun seperti itu (dispatch action → update reducer/store → re-render view) dan *mengapa* aliran satu arah lebih disukai: membuat perubahan state dapat diprediksi, dapat dilacak, dan dapat di-debug.

Meskipun Anda tidak pernah menggunakan "classic" Flux, ide intinya adalah fondasi konseptual dari seluruh ekosistem.