Czym jest architektura Flux?

Question

Accepted Answer

**Flux** to wzorzec architektury (z Facebooka) do zarządzania stanem za pomocą **jednokierunkowego (jednokierunkowego) przepływu danych**. Był to konceptualny fundament dla Redux i wpłynął na większość nowoczesnych bibliotek state. Podstawowa idea: dane płyną w jednym, przewidywalnym kierunku.

## The unidirectional cycle

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

Pętla jest ściśle jednokierunkowa: widoki nigdy nie modyfikują stores bezpośrednio; *dispatch actions*, które przepływają przez dispatcher do stores, które następnie aktualizują widoki.

## Why one-way flow matters

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

Problem, który Flux rozwiązał (w dużych aplikacjach MVC), to splątany, dwukierunkowy przepływ danych, gdzie było niemożliwe wiedziałem, co zmieniło co. Zmuszenie wszystkich zmian przez dispatch action robi przepływ danych jawnym i do debugowania.

## 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 przyjął zasadę jednokierunkowego przepływu Flux i usprawnił ją: jeden store, czyste funkcje reducer zamiast stores z logiką i brak wyraźnego dispatcher.

## The lasting legacy

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

## Dlaczego to ważne

Flux wprowadził zasadę **jednokierunkowego przepływu danych**, która jest podstawą praktycznie wszystkich nowoczesnych rozwiązań do zarządzania stanem.

Zrozumienie tego wyjaśnia, *dlaczego* Redux i podobne narzędzia są skonstruowane w taki sposób (dispatch action → reducer/store updates → view re-renders) i *dlaczego* preferuje się jednokierunkowy przepływ: sprawia, że zmiany stanu są przewidywalne, możliwe do śledzenia i łatwe do debugowania.

Nawet jeśli nigdy nie używasz "klasycznego" Flux, jego podstawowa idea jest konceptualnym fundamentem całego ekosystemu.