Wat zijn de kernconcepten van Redux?

Question

Accepted Answer

**Redux** is een voorspelbare state container gebouwd op drie kernprincipes: een **single store**, **read-only state** die alleen via **actions** wordt gewijzigd, en **pure reducers** die de volgende state berekenen. Gegevens stromen op één manier, waardoor wijzigingen traceerbaar zijn. ## De drie principes ```text 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 ``` ## De onderdelen en de stroom ```js // 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; ``` ## De cyclus ```text UI dispatches an ACTION → REDUCER computes new STATE → STORE updates → subscribed components re-render → user interacts → dispatches the next action ``` Deze strikte eenrichtingsstroom betekent dat elke statuswijziging het gevolg is van een verzonden actie die door een pure functie wordt verwerkt — volledig traceerbaar. ## Het gebruiken in React ```jsx import { useSelector, useDispatch } from "react-redux"; function Counter() { const count = useSelector(state => state.counter.value); // read const dispatch = useDispatch(); return ; // write } ``` ## Waarom deze beperkingen? ```text Predictability — every change is an explicit, logged action Debuggability — time-travel debugging, action replay (Redux DevTools) Testability — pure reducers are trivial to unit test ``` (Opmerking: modern Redux maakt gebruik van **Redux Toolkit**, die de boilerplate drastisch vermindert terwijl deze concepten behouden blijven.) ## Waarom het belangrijk is De kernconcepten van Redux — single store, actions, pure reducers, one-way flow — maken de applicatiestatus **voorspelbaar en traceerbaar**, wat de hoofdwaarde ervan voor grote apps is. Het begrijpen van store/action/reducer/dispatch/select is essentieel voor de vele codebases die Redux gebruiken, en de principes (immutable updates, pure reducers, unidirectional flow) herhalen zich in vrijwel elke state library. De afweging is boilerplate, wat Redux Toolkit aanpakt terwijl deze fundamenten behouden blijven.