Qu'est-ce que l'architecture Flux ?

Question

IT Interview Practice · Accepted Answer

**Flux** est un pattern d'architecture (de Facebook) pour gérer l'état avec un **flux de données unidirectionnel (dans une seule direction)**. C'était la base conceptuelle de Redux et a influencé la plupart des bibliothèques d'état modernes. L'idée centrale : les données circulent dans une seule direction, prévisible.

## Le cycle unidirectionnel

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

La boucle est strictement unidirectionnelle : les vues ne modifient jamais les stores directement ; elles *envoient des actions*, qui circulent à travers le dispatcher vers les stores, qui mettent ensuite à jour les vues.

## Pourquoi le flux unidirectionnel est important

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

Le problème que Flux a résolu (dans les grandes applications MVC) était le flux de données enchevêtré et bidirectionnel où il était impossible de savoir ce qui a changé. Forcer tous les changements à travers des actions envoyées rend le flux de données explicite et débogage.

## 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 a pris le principe de flux unidirectionnel de Flux et l'a simplifié : un seul store, des fonctions reducer pures au lieu de stores-avec-logique, et pas de dispatcher explicite.

## L'héritage durable

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

## Pourquoi c'est important

Flux a introduit le principe du **flux de données unidirectionnel** qui sous-tend pratiquement tous les outils modernes de gestion d'état.
"},

Le cycle unidirectionnel

Pourquoi le flux unidirectionnel est important

Flux vs Redux

L'héritage durable

Pourquoi c'est important

Questions connexes