Vad är Flux-arkitekturen?

Question

Accepted Answer

**Flux** är ett arkitekturmönster (från Facebook) för att hantera tillstånd med **enriktad (envägs) dataflöde**. Det var den teoretiska grunden för Redux och påverkade de flesta moderna tillståndsbibliotek. Kärnidén: data flödar i en enda, förutsägbar riktning.

## Den enriktade cykeln

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

Loopen är strikt enriktad: vyer modifierar aldrig butiker direkt; de *skickar åtgärder*, som flödar genom dispatcher till butikerna, som sedan uppdaterar vyerna.

## Varför envägs flöde är viktigt

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

Problemet som Flux löste (i stora MVC-appar) var tradig, dubbelriktad dataflöde där det var omöjligt att veta vad som ändrade vad. Genom att tvinga alla ändringar genom skickade åtgärder blir dataflödet explicit och debugbart.

## Flux kontra 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 tog Flux enriktade-flödes-princip och strömlinjeformade det: en butik, rena reducerfunktioner istället för butiker-med-logik, och ingen explicit dispatcher.

## Det varaktiga arvet

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

## Varför det är viktigt

Flux introducerade principen om **enriktad dataflöde** som ligger till grund för praktiskt taget all modern tillståndshantering.

Att förstå det förklarar *varför* Redux och liknande verktyg är strukturerade som de är (skicka en åtgärd → reducer/butik uppdateras → vy återskapas) och *varför* envägs flöde föredras: det gör tillståndsändringar förutsägbara, spårbara och debugbara.

Även om du aldrig använder "klassisk" Flux är dess kärnidé den teoretiska grunden för hela ekosystemet.