Hva er Flux-arkitekturen?

Question

Accepted Answer

**Flux** er et arkitekturmønster (fra Facebook) for å administrere state med **enveisrettet (en-veis) dataflyt**. Det var det konseptuelle grunnlaget for Redux og påvirket de fleste moderne state-biblioteker. Kjerneideen: data flyter i en enkelt, forutsigbar retning.

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

Sløyfen er strengt enveisrettet: visninger endrer aldri stores direkte; de *dispatches actions*, som flyter gjennom dispatcheren til stores, som deretter oppdaterer visningene.

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

Problemet Flux løste (i store MVC-apper) var rotete, toveis dataflyt hvor det var umulig å vite hva som endret hva. Ved å tvinge alle endringer gjennom sendte actions blir dataflyten eksplisitt og debuggbar.

## 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 tok Flux sitt enveisrettet-flow-prinsipp og strømlinjeformet det: en store, rene reducer-funksjoner i stedet for stores-med-logikk, og ingen eksplisitt 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."
```

## Hvorfor det er viktig

Flux introduserte **enveisrettet dataflyt**-prinsippet som underbygger praktisk talt all moderne state management.

Å forstå det forklarer *hvorfor* Redux og lignende verktøy er strukturert slik de er (dispatch en action → reducer/store oppdateres → view re-renders) og *hvorfor* enveisflyt foretrekkes: det gjør state-endringer forutsigbar, sporbar og debuggbar.

Self om du aldri bruker "klassisk" Flux, er kjerneideen dets det konseptuelle grunnlaget for hele økosystemet.