Redux est un conteneur d'état prévisible construit sur trois principes fondamentaux : un unique store, un état en lecture seule modifié uniquement via des actions, et des réducteurs purs qui calculent l'état suivant. Le flux de données circule dans une seule direction, rendant les changements traçables.
1. Single source of truth — the whole app's state lives in ONE store object
2. State is read-only — you never mutate it; you DISPATCH actions to change it
3. Changes via pure reducers — (state, action) => newState, no side effects
// STORE — holds the single state tree
const store = configureStore({ reducer: rootReducer });
// ACTION — a plain object describing what happened
const action = { type: "counter/incremented", payload: 1 };
// REDUCER — pure function: given state + action, returns NEW state
function counterReducer(state = { value: 0 }, action) {
switch (action.type) {
case "counter/incremented":
return { ...state, value: state.value + action.payload }; // new object
default:
return state;
}
}
// DISPATCH — the only way to trigger a change
store.dispatch(action);
// SELECT — read state
store.getState().counter.value;
UI dispatches an ACTION → REDUCER computes new STATE → STORE updates →
subscribed components re-render → user interacts → dispatches the next action
Ce flux strictement unidirectionnel signifie que chaque changement d'état est le résultat d'une action dispatchée traitée par une fonction pure — complètement traçable.
import { useSelector, useDispatch } from "react-redux";
function Counter() {
const count = useSelector(state => state.counter.value); // read
const dispatch = useDispatch();
return <button onClick={() => dispatch(increment())}>{count}</button>; // write
}
Predictability — every change is an explicit, logged action
Debuggability — time-travel debugging, action replay (Redux DevTools)
Testability — pure reducers are trivial to unit test
(Note : Redux moderne utilise Redux Toolkit, qui réduit drastiquement le boilerplate tout en conservant ces concepts.)
Les concepts fondamentaux de Redux — unique store, actions, réducteurs purs, flux unidirectionnel — rendent l'état de l'application prévisible et traçable, ce qui est sa valeur principale pour les grandes applications.
Comprendre store/action/reducer/dispatch/select est essentiel pour les nombreuses bases de code qui utilisent Redux, et les principes (mises à jour immuables, réducteurs purs, flux unidirectionnel) réapparaissent dans presque chaque bibliothèque d'état.
Le compromis est le boilerplate, que Redux Toolkit résout tout en préservant ces principes fondamentaux.