Redux: patroon voor statusbeheer in React Native

Q: Wat is het verschil tussen Redux en Context API in React?

Redux — een volledige oplossing met Store, DevTools, Middleware en onveranderlijke status. Context API — het ingebouwde mechanisme van React voor gegevensoverdracht zonder props drilling. Context is geschikt voor globale thema's en lokalisatie, Redux — voor complexe status met asynchrone bewerkingen, caching en debuggen. In grote applicaties veroorzaakt Context onnodige herrenderingen, Redux met selectors lost dit probleem op.

Q: Wat is Immer in Redux Toolkit?

Immer — een bibliotheek voor onveranderlijk werken met status, ingebouwd in Redux Toolkit. Immer maakt het mogelijk om reducers te schrijven alsof je de state direct muteert: state.value += 1. Onder de motorkap maakt Immer een proxy-object (draft), volgt wijzigingen en retourneert een nieuw onveranderlijk object. Dit vermindert de code van reducers met 50% en elimineert accidentele mutaties.

Q: Hoe test je Redux?

Redux-logica wordt geïsoleerd getest: Reducer — pure functie, voldoende om deze met verschillende Actions aan te roepen en het resultaat te controleren. Action Creator — controleer het geretourneerde object. Thunk — mock de API, roep dispatch aan en controleer welke Actions zijn verzonden. Component met useSelector — gebruik Provider met een test-Store in de renderer. Redux DevTools helpen bij het schrijven van een test door de Action-reeks uit een echte sessie te reproduceren.

Q: Wanneer gebruik je Redux in plaats van useState?

useState is voldoende voor lokale status van één component: tekstveld, geopend/gesloten modaal. Redux is nodig wanneer status wordt gedeeld tussen meerdere schermen, asynchrone synchronisatie vereist (gegevens van server), bewaard moet blijven tussen herstarts van de applicatie (persist) of time-travel debuggen vereist. Voor kleine applicaties is Redux overkill — gebruik Context + useReducer.

Q: Wat is normalize in Redux?

Normalizr — een bibliotheek voor het normaliseren van geneste gegevens naar een platte Store-structuur. In plaats van diepe objecten zoals user.posts[0].comments op te slaan, maakt normalisatie woordenboeken: entities.users, entities.posts, entities.comments met verwijzingen op ID. Dit vereenvoudigt het bijwerken van één entiteit op alle plaatsen en versnelt selectors. Redux Toolkit beveelt genormaliseerde gegevens aan voor complexe modellen.

Auteur: IT Sectr Gepubliceerd: 2026-02-19 Leestijd: 8 min

Redux — een voorspelbare container voor statusbeheer voor JavaScript-applicaties, gemaakt door Dan Abramov in 2015. Redux implementeert een unidirectionele gegevensstroom op basis van de Flux-architectuur: status wordt opgeslagen in een enkele Store, gewijzigd alleen via pure Reducer-functies en geïnitieerd via Action met Dispatch. Volgens npm Trends behoudt Redux meer dan 7 miljoen wekelijkse downloads en blijft het de standaard voor statusbeheer in React Native en webapplicaties.

Belangrijkste punten

Store — de enige bron van waarheid, die de volledige statusboom van de applicatie opslaat
Action — object met het type-veld dat de intentie om de status te wijzigen beschrijft
Reducer — pure functie (prevState, action) => newState zonder bijwerkingen
Dispatch — de methode van Store om Action naar Reducer te sturen
Middleware — tussenlaag tussen dispatch en reducer voor asynchrone bewerkingen en logboekregistratie

Wat is Redux?

Redux — een architectuurpatroon en bibliotheek voor statusbeheer, gebaseerd op drie principes: de enige bron van waarheid (single source of truth), alleen-lezen status (read-only) en wijzigingen via pure functies. In tegenstelling tot MVC, waar het model de status onvoorspelbaar kan wijzigen, garandeert Redux determinisme: bij dezelfde invoergegevens is het resultaat altijd hetzelfde.

Redux is geïnspireerd door de Flux-architectuur van Facebook en de taal Elm. Het belangrijkste verschil met Flux — één Store in plaats van meerdere. In Redux wordt de volledige applicatiestatus — objecten, arrays, laadvlaggen — opgeslagen in één boom. Dit vereenvoudigt debuggen, testen en statusherstel (time-travel debugging). De ontwikkelaar kan de hele Store opslaan, de Action-reeks reproduceren en zien hoe de status bij elke stap veranderde.

Volgens State of JS 2025 kiest 68% van de respondenten die statusbeheer gebruiken voor Redux of Redux Toolkit. De tool wordt ondersteund door alle moderne frameworks: React, React Native, Angular, Vue en zelfs pure JavaScript zonder frameworks.

Unidirectionele gegevensstroom

Unidirectional data flow — het kernprincipe van Redux, waarbij gegevens strikt in één richting bewegen: View → Action → Dispatch → Reducer → Store → View. Geen enkele component kan de Store direct wijzigen. View abonneert zich alleen op wijzigingen via useSelector of connect en initieert wijzigingen via dispatch.

Redux-cyclus: de gebruiker drukt op een knop → de component roept dispatch({ type: 'INCREMENT' }) aan → Store geeft Action door aan Root Reducer → Reducer berekent de nieuwe status → Store stelt abonnees op de hoogte → View wordt opnieuw weergegeven met nieuwe gegevens. Deze cyclus garandeert dat elke wijziging een expliciete oorzaak heeft in de vorm van een specifieke Action.

DevTools — de ingebouwde tool van Redux voor het bewaken van elke Action, Store-status en uitvoeringstijd. De ontwikkelaar ziet een lijst van alle verzonden Actions, het statusverschil (diff) voor en na, en kan terugkeren naar elke vorige status. Dit maakt het debuggen van complexe statussen tientallen keren sneller dan gewone logboekregistratie.

Kerncomponenten van Redux

Store — object dat de volledige statusboom bevat. Gemaakt via configureStore (RTK) of createStore. Store biedt drie methoden: getState() voor lezen, dispatch(action) voor wijzigen en subscribe(listener) voor abonneren. In Redux Toolkit bevat Store al middleware, DevTools en ondersteuning voor slices.

TypeScript

import { configureStore } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState: CounterState = { value: 0 }

function counterReducer(
  state = initialState,
  action: { type: string }
): CounterState {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 }
    default:
      return state
  }
}

const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }

Action en Action Creator — Action is een object met het verplichte type-veld (string-constante) en optionele payload (gegevens). Action Creator — een functie die een Action retourneert. In Redux Toolkit wordt createAction gebruikt voor het genereren van Actions met automatische typering.

Reducer — pure functie die de huidige status en Action ontvangt en een nieuwe status retourneert. Reducer mag niet: state muteren (er wordt een nieuw object geretourneerd), API aanroepen, willekeurige getallen genereren of Date benaderen. Onveranderlijkheid wordt gegarandeerd door de spread-operator ... of Immer (ingebouwd in RTK).

Component	Verantwoordelijkheid	Beperkingen
Store	Statusopslag, dispatch, subscribe	Eén per applicatie
Action	Beschrijving van intentie om status te wijzigen	Moet type hebben
Reducer	Berekening van nieuwe status	Pure functie, zonder bijwerkingen
Dispatch	Verzenden van Action naar Reducer	Standaard synchroon
Selector	Extraheren van gegevens uit Store	Memoïsatie via createSelector

Middleware en Redux Thunk

Middleware — een keten van functies die wordt ingevoegd tussen de dispatch-aanroep en het moment dat Action de Reducer bereikt. Elke middleware ontvangt de Store API en kan Actions loggen, wijzigen, vertragen of annuleren. Redux Thunk — standaard middleware voor asynchrone bewerkingen, waarmee functies in plaats van objecten kunnen worden gedispatched.

JavaScript

import { createAsyncThunk } from '@reduxjs/toolkit'

export const fetchUser = createAsyncThunk(
  'users/fetchById',
  async (userId: number, { rejectWithValue }) => {
    const response = await fetch(`/api/users/${userId}`)
    if (!response.ok)
      return rejectWithValue('Failed to fetch')
    return await response.json()
  }
)

Populaire middleware: Redux Thunk — voor eenvoudige asynchrone aanroepen, Redux Saga — voor complexe scenario's met saga-generators (debounce, race, parallelle verzoeken), Redux Observable — gebaseerd op RxJS voor reactieve stromen. In Redux Toolkit wordt middleware aangesloten via de parameter middleware in configureStore.

Volgens de State of JS 2025-enquête wordt Thunk gebruikt in 72% van de Redux-projecten, Saga in 18%, Observable in 5%. Voor de meeste applicaties is de combinatie Thunk + RTK Query voldoende om 95% van de asynchrone gegevensverwerkingsscenario's te dekken.

Redux Toolkit en RTK Query

Redux Toolkit (RTK) — de officiële, aanbevolen manier om Redux-logica te schrijven, uitgebracht in 2019. RTK bevat configureStore, createSlice, createAsyncThunk en createEntityAdapter, waardoor de boilerplate-code van Redux met 60-70% wordt verminderd. In plaats van handmatig Action Creator, Reducer en typen te maken, wordt één createSlice gebruikt.

TypeScript

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment(state) { state.value += 1 },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload
    }
  }
})

export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

RTK Query — de ingebouwde oplossing voor het werken met API op basis van Redux Toolkit. Maakt het mogelijk om endpoints declaratief te definiëren via createApi met automatische hook-generatie, caching, tag-invalidatie en optimistische updates. RTK Query vervangt het handmatig schrijven van Thunk, Reducer en Selector voor elke API-aanvraag.

Entity Adapter — de createEntityAdapter-utility voor het normaliseren van entiteitscollecties. Biedt ingebouwde CRUD-reducers, selectors en sortering voor objectarrays. Als er lijsten met gebruikers, producten of bestellingen in de Store worden opgeslagen — vermindert Entity Adapter de reductiecode met 80%.

Redux in React Native

React Native Redux — de standaardcombinatie voor mobiele applicaties in JavaScript. Redux wordt geïntegreerd via Provider uit react-redux, dat de hoofdcomponent van de applicatie omhult. De hooks useSelector en useDispatch geven componenten toegang tot de status zonder props drilling. Persist — redux-persist slaat Store op in AsyncStorage of MMKV en herstelt de status na het opnieuw opstarten van de applicatie.

Middleware voor React Native: redux-flipper voor debuggen via Flipper, redux-observable voor reactieve stromen met native drivers, react-native-mmkv voor snelle persistente opslag. De navigatie-plugin redux-first-router verbindt schermen met de Store, waardoor de schermstatus bij terugkeer kan worden hersteld.

In React Native wordt Redux gebruikt samen met de network-first-strategie: de applicatie probeert eerst gegevens van de server te laden en cachet deze vervolgens in de Store via RTK Query of redux-persist. Offline-modus wordt bereikt door een combinatie van Redux + NetInfo + Action-wachtrij voor opnieuw verzenden wanneer de verbinding wordt hersteld.

Veelgestelde vragen

Wat is het verschil tussen Redux en Context API in React?

Redux — een volledige oplossing met Store, DevTools, Middleware en onveranderlijke status. Context API — het ingebouwde mechanisme van React voor gegevensoverdracht zonder props drilling. Context is geschikt voor globale thema's en lokalisatie, Redux — voor complexe status met asynchrone bewerkingen, caching en debuggen. In grote applicaties veroorzaakt Context onnodige herrenderingen, Redux met selectors lost dit probleem op.

Wat is Immer in Redux Toolkit?

Immer — een bibliotheek voor onveranderlijk werken met status, ingebouwd in Redux Toolkit. Immer maakt het mogelijk om reducers te schrijven alsof je de state direct muteert: state.value += 1. Onder de motorkap maakt Immer een proxy-object (draft), volgt wijzigingen en retourneert een nieuw onveranderlijk object. Dit vermindert de code van reducers met 50% en elimineert accidentele mutaties.

Hoe test je Redux?

Redux-logica wordt geïsoleerd getest: Reducer — pure functie, voldoende om deze met verschillende Actions aan te roepen en het resultaat te controleren. Action Creator — controleer het geretourneerde object. Thunk — mock de API, roep dispatch aan en controleer welke Actions zijn verzonden. Component met useSelector — gebruik Provider met een test-Store in de renderer. Redux DevTools helpen bij het schrijven van een test door de Action-reeks uit een echte sessie te reproduceren.

Wanneer gebruik je Redux in plaats van useState?

useState is voldoende voor lokale status van één component: tekstveld, geopend/gesloten modaal. Redux is nodig wanneer status wordt gedeeld tussen meerdere schermen, asynchrone synchronisatie vereist (gegevens van server), bewaard moet blijven tussen herstarts van de applicatie (persist) of time-travel debuggen vereist. Voor kleine applicaties is Redux overkill — gebruik Context + useReducer.

Wat is normalize in Redux?

Normalizr — een bibliotheek voor het normaliseren van geneste gegevens naar een platte Store-structuur. In plaats van diepe objecten zoals user.posts[0].comments op te slaan, maakt normalisatie woordenboeken: entities.users, entities.posts, entities.comments met verwijzingen op ID. Dit vereenvoudigt het bijwerken van één entiteit op alle plaatsen en versnelt selectors. Redux Toolkit beveelt genormaliseerde gegevens aan voor complexe modellen.

Samenvatting

Redux — voorspelbare statuscontainer met één Store en pure Reducers
Action — object met type, Reducer — pure functie, Dispatch — verzendmechanisme
Redux Toolkit — officiële API met createSlice, createAsyncThunk en RTK Query
Middleware — tussenlaag voor asynchrone bewerkingen: Thunk, Saga, Observable
React Native integreert via Provider, useSelector en redux-persist voor offline-modus
DevTools — time-travel debuggen met reproductie van elke Action
Normalizr — gegevensnormalisatie voor efficiënte selectors en updates

We ontwikkelen een mobiele applicatie turnkey

IT Sectr creëert sinds 2017 iOS- en Android-applicaties voor startups en bedrijven. We adviseren u en stellen de beste oplossing voor.

Bespreek het project