Che cos'è l'architettura Flux?

Question

Accepted Answer

**Flux** è un pattern architetturale (da Facebook) per gestire lo stato con **flusso dati unidirezionale (a senso unico)**. È stata la base concettuale per Redux e ha influenzato la maggior parte delle librerie di state management moderne. L'idea centrale: i dati fluiscono in una direzione singola e prevedibile.

## Il ciclo unidirezionale

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

Il loop è rigorosamente unidirezionale: le views non modificano mai gli stores direttamente; *dispatchano azioni*, che fluiscono attraverso il dispatcher agli stores, che poi aggiornano le views.

## Perché è importante il flusso a senso unico

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

Il problema che Flux ha risolto (nelle grandi app MVC) era il flusso dati intricato e bidirezionale dove era impossibile sapere cosa ha cambiato cosa. Forzare tutti i cambiamenti attraverso azioni dispatchate rende il flusso dati esplicito e debuggabile.

## 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 ha preso il principio del flusso unidirezionale di Flux e lo ha semplificato: uno store, funzioni reducer pure invece di stores-con-logica, e nessun dispatcher esplicito.

## L'eredità duratura

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

## Perché è importante

Flux ha introdotto il principio del **flusso dati unidirezionale** che sottende praticamente tutti i moderni state management.

Comprenderlo spiega *perché* Redux e strumenti simili sono strutturati nel modo in cui lo sono (dispatch un'azione → reducer/store aggiorna → view re-render) e *perché* il flusso a senso unico è preferito: rende i cambiamenti di stato prevedibili, tracciabili e debuggabili.

Ancora se non usi mai "classic" Flux, la sua idea centrale è la base concettuale dell'intero ecosistema.