Mi az a Flux architektúra?

Question

Accepted Answer

A **Flux** egy tervezési minta (a Facebooktól) az állapot kezeléséhez **egyirányú (односторонний) adatfolyammal**. Ez volt a Redux koncepcionális alapja, és számos modern állapotkezelő könyvtárat befolyásolt. Az alapgondolat: az adatok egyetlen, előrejelezhető irányban áramlanak.

## Az egyirányú ciklus

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

A hurok szigorúan egyirányú: a nézetek soha nem módosítják közvetlenül a store-okat; *akciók küldésével* dolgoznak, amelyek a diszpatcseren keresztül a store-okhoz áramlanak, és aztán frissítik a nézeteket.

## Miért fontos az egyirányú áramlás

```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).
```

A Flux által megoldott probléma (nagy MVC alkalmazásokban) az összefonódott, kétirányú adatáramlás volt, ahol lehetetlen volt tudni, hogy mi módosított mit. Ha az összes módosítást küldött akciók felé kényszerítjük, az adatáramlás explicit és debuggolható lesz.

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

A Redux átvette a Flux egyirányú áramlásának elvét és egyszerűsítette: egyetlen store, tiszta reducer funkciók az áruházak helyett logikával, és nincs explicit diszpatcs.

## Az örökség

```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."
```

## Miért fontos

A Flux az **egyirányú adatáramlás** elvét vezette be, amely gyakorlatilag az összes modern állapotkezelést alátámasztja.

A megértése megmagyarázza, *miért* a Redux és hasonló eszközök úgy épülnek fel, ahogy (küldjön akciót → frissítse a reducer/store-t → renderezze újra a nézetet) és *miért* előnyben részesítjük az egyirányú áramlást: az állapot módosításokat előrejelezhetővé, nyomon követhetővé és debuggolhatóvá teszi.

Ha soha nem is használod a "klasszikus" Fluxot, annak alapgondolata az egész ökoszisztéma koncepcionális alapja.