O que é a arquitetura Flux?

Question

Accepted Answer

**Flux** é um padrão de arquitetura (do Facebook) para gerenciar state com **fluxo de dados unidirecional (unidirecional)**. Foi a base conceitual para Redux e influenciou a maioria das bibliotecas de state modernas. A ideia central: dados fluem em uma única direção previsível.

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

O loop é estritamente unidirecional: as visualizações nunca modificam diretamente os stores; elas *dispatch actions*, que fluem através do dispatcher para os stores, que então atualizam as visualizações.

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

O problema que Flux resolveu (em grandes aplicações MVC) era fluxo de dados bidirecionais e confusos, onde era impossível saber o que mudava o quê. Forçar todas as mudanças através de ações despachadas torna o fluxo de dados explícito e depurável.

## 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 pegou o princípio de fluxo unidirecional do Flux e o simplificou: um store, funções reducer puras em vez de stores com lógica, e nenhum dispatcher explícito.

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

## Por que isso importa

Flux introduziu o princípio de **fluxo de dados unidirecional** que sustenta praticamente todo o gerenciamento de state moderno.

Compreender isso explica *por que* Redux e ferramentas similares são estruturadas da maneira que são (dispatch uma action → reducer/store updates → view re-renders) e *por que* o fluxo unidirecional é preferido: torna as mudanças de state previsíveis, rastreáveis e depuráveis.

Mesmo que você nunca use o "Flux clássico", sua ideia central é a base conceitual de todo o ecossistema.