Wat is de Flux-architectuur?

Question

Accepted Answer

**Flux** is een architectuurpatroon (van Facebook) voor het beheren van state met **unidirectionele (eenrichtings)gegevensstroom**. Het was de conceptuele basis voor Redux en heeft de meeste moderne state libraries beïnvloed. Het kernidee: gegevens stromen in een enkele, voorspelbare richting.

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

De lus is strikt eenrichtingsverkeer: views wijzigen stores nooit rechtstreeks; ze *dispatchen actions*, die via de dispatcher naar de stores stromen, die vervolgens de views bijwerken.

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

Het probleem dat Flux oploste (in grote MVC-apps) was verwarde, bidirectionele gegevensstroom waarbij het onmogelijk was om te weten wat wat veranderde. Door alle wijzigingen via geverstuurd actions af te dwingen, wordt de gegevensstroom expliciet en debugbaar.

## 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 nam Flux's unidirectionele-flow principe en vereenvoudigde het: één store, pure reducer functions in plaats van stores met logica, en geen expliciete 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."
```

## Waarom het belangrijk is

Flux introduceerde het **unidirectionele gegevensstroom**principe dat vrijwel alle moderne state management ondersteunt.

De werking ervan begrijpen legt uit *waarom* Redux en soortgelijke tools op de manier zijn gestructureerd waarop ze zijn (action dispatchen → reducer/store updates → view re-renders) en *waarom* eenrichtingsverkeer de voorkeur heeft: het maakt state changes voorspelbaar, traceerbaar en debugbaar.

Self als u nooit "klassieke" Flux gebruikt, vormt het kernidee ervan de conceptuele basis van het hele ecosystem.