Mikä on Flux-arkkitehtuuri?

Question

Accepted Answer

**Flux** on arkkitehtuurikuvio (Facebookilta) tilaksen hallinnoimiseksi **yksisuuntaisen (yhteen suuntaan menevän) datavirran** avulla. Se oli Redux:in käsitteellinen perusta ja vaikutti useimpiin moderneihin state management -kirjastoihin. Ydinajatus: data kulkee yksittäiseen, ennustettavaan suuntaan.

## Yksisuuntainen sykli

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

Silmukka on tiukasti yksisuuntainen: näkymät (views) eivät muuta varastoja (stores) suoraan; ne *lähettävät toimintoja*, jotka kulkevat jakajan (dispatcher) kautta varastoihin, jotka sitten päivittävät näkymiä.

## Miksi yksisuuntainen datavirta on tärkeää

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

Ongelma, jonka Flux ratkaisi (suurissa MVC-sovelluksissa), oli sotkuinen, kaksisuuntainen datavirta, jossa oli mahdotonta tietää, mikä muutti mitä. Kaikkien muutosten pakottaminen lähetytettyjen toimintojen kautta tekee datavirrasta eksplisiittisen ja virheenetsinnän kannalta paremman.

## 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 otti Fluxin yksisuuntaisen virtausperiaatteen ja virtaviivaisti sen: yksi varasto, puhtaat reducer-funktiot varastointien sijaan logiikalla, eikä nimenomaista jakajaa.

## Pysyvä perintö

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

## Miksi se on tärkeää

Flux esitteli **yksisuuntaisen datavirran** periaatteen, joka tukee käytännöllisesti katsoen kaikkea modernia tilanhallintaa.

Sen ymmärtäminen selittää, *miksi* Redux ja vastaavat työkalut on rakennettu siten kuin ne on (läheta toiminto → reducer/varasto päivittyy → näkymä uudelleenpiirretään) ja *miksi* yksisuuntainen virta on parempi: se tekee tilamuutoksista ennustettavia, jäljitettäviä ja virheenetsinnän kannalta parempia.

Vaikka et koskaan käytä "klassista" Fluxia, sen ydinajatus on koko ekosysteemin käsitteellinen perusta.