Redux ist ein vorhersehbarer State Container, der auf drei Kernprinzipien aufgebaut ist: einem einzelnen Store, schreibgeschütztem State, der nur durch Actions geändert wird, und reinen Reducern, die den nächsten State berechnen. Der Datenfluss erfolgt in eine Richtung, was Änderungen nachvollziehbar macht.
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
Dieser strenge unidirektionale Fluss bedeutet, dass jede State-Änderung das Ergebnis einer abgesendeten Action ist, die von einer reinen Funktion verarbeitet wird — vollständig nachverfolgbar.
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
(Hinweis: modernes Redux verwendet Redux Toolkit, das Boilerplate deutlich reduziert und diese Konzepte beibehält.)
Die Kernkonzepte von Redux — einzelner Store, Actions, reine Reducer, unidirektionaler Fluss — machen den Anwendungszustand vorhersehbar und nachverfolgbar, was sein Hauptwert für große Apps ist.
Das Verständnis von store/action/reducer/dispatch/select ist für die vielen Codebases, die Redux verwenden, unerlässlich, und die Prinzipien (unveränderliche Updates, reine Reducer, unidirektionaler Fluss) wiederholen sich in fast jeder State-Bibliothek.
Der Kompromiss ist Boilerplate, das Redux Toolkit anspricht, während diese Grundlagen erhalten bleiben.