Ce este arhitectura Flux?

Question

Accepted Answer

**Flux** este un șablon de arhitectură (de la Facebook) pentru gestionarea state cu **flux de date unidirecțional (într-o singură direcție)**. A fost baza conceptuală pentru Redux și a influențat majoritatea bibliotecilor de state moderne. Ideea principală: datele curge într-o singură direcție previzibilă.

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

Bucla este strict unidirecțională: vizualizările nu modifica niciodată direct store-urile; ele *dispatch actions*, care curge prin dispatcher la store-uri, care apoi actualizează vizualizările.

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

Problema pe care Flux a rezolvat-o (în aplicațiile mari MVC) era fluxul de date bidirecțional și confuz, unde era imposibil să știi ce a schimbat ce. Forțarea tuturor modificărilor prin acțiuni expediate face fluxul de date explicit și debug-abil.

## 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 a luat principiul fluxului unidirecțional al Flux și l-a simplificat: un singur store, funcții reducer pure în loc de store-uri cu logică, și niciun dispatcher explicit.

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

## De ce este important

Flux a introdus principiul **fluxului de date unidirecțional** care susține practic toate gestionarea state-ului modern.

Înțelegerea acestui lucru explică *de ce* Redux și instrumente similare sunt structurate în modul în care sunt (dispatch o action → reducer/store updates → view re-renders) și *de ce* fluxul unidirecțional este preferat: face modificările de state previzibile, trasabile și debug-abile.

Chiar dacă nu folosești niciodată "Flux clasic", ideea sa centrală este baza conceptuală a întregului ecosistem.