React Native Academy · Les

Status lezen met useSelector

Gebruik de useSelector-hook om waarden uit de store in een component te lezen en schrijf selectorfuncties die berekende gegevens uit de ruwe status afleiden.

Les 3 van 413 stappen

Status lezen met useSelector is een gratis React Native Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.

Wat is useSelector?

useSelector is een hook uit react-redux waarmee een component gegevens uit de Redux-store kan lezen. De hook accepteert een selectorf functie als argument. De selector ontvangt de volledige rootstatus en retourneert alleen het stukje gegevens dat het component nodig heeft. Wanneer dat stukje gegevens verandert, geeft React het component automatisch opnieuw weer.

Basisgebruik van useSelector

Roep useSelector aan binnen een functionele component en geef een pijlfunctie mee die de benodigde waarde uit de globale status haalt. De hook abonneert zich op de store en start alleen een nieuwe render wanneer de geselecteerde waarde verandert. Zo voorkom je onnodige nieuwe renders wanneer niet-gerelateerde delen van de status worden bijgewerkt.

import React from 'react';
import { View, Text } from 'react-native';
import { useSelector } from 'react-redux';
import type { RootState } from '../../store';

export default function CounterDisplay() {
  const count = useSelector((state: RootState) => state.counter.value);

  return (
    <View>
      <Text>Count: {count}</Text>
    </View>
  );
}

Getypeerde useAppSelector gebruiken

Gebruik in TypeScript-projecten de vooraf getypeerde hook useAppSelector die je in het hooks-bestand hebt gemaakt. Hierdoor hoef je de statusparameter niet telkens te annoteren wanneer je de hook aanroept. Je editor vult ook namen van statusproperties automatisch aan, waardoor je sneller correcte selectors schrijft.

import { useAppSelector } from '../../store/hooks';

export default function CounterDisplay() {
  // No need to annotate RootState — it is inferred automatically
  const count = useAppSelector((state) => state.counter.value);
  const status = useAppSelector((state) => state.counter.status);

  return <Text>{status === 'loading' ? 'Loading...' : count}</Text>;
}

Wat is een selectorfunctie?

Een selector is simpelweg een functie die de Redux-status als argument ontvangt en een afgeleide waarde retourneert. Door selectors los te houden van componenten bevorder je hergebruik: meerdere componenten kunnen dezelfde selector gebruiken. Je kunt selectors ook samenstellen om complexere berekende waarden uit onbewerkte statusgegevens af te leiden.

// selectors.ts
import type { RootState } from './store';

export const selectCount = (state: RootState) => state.counter.value;
export const selectDoubledCount = (state: RootState) => state.counter.value * 2;

// In component:
const count = useAppSelector(selectCount);
const doubled = useAppSelector(selectDoubledCount);

Gedrag van nieuwe renders bij useSelector

useSelector gebruikt strikte gelijkheid (===) om de vorige en de volgende geselecteerde waarden te vergelijken. De component wordt alleen opnieuw gerenderd wanneer de geretourneerde waarde verandert. Als je selector een object- of arrayliteral retourneert, zoals state.items.filter(...), retourneert deze bij elke aanroep een nieuwe referentie, waardoor onnodige nieuwe renders ontstaan. Laat selectors primitieve waarden retourneren of onthoud hun resultaten.

// This runs a filter on every store update — returns new array each time!
const activeItems = useAppSelector(
  (state) => state.todos.filter((t) => t.active) // Bad for performance
);

// Better: use a stable reference or memoize with reselect

Selectors met memoization en reselect

De bibliotheek reselect (opgenomen in RTK) biedt createSelector voor het maken van selectors met memoization. Een selector met memoization bewaart het laatste resultaat en berekent dit alleen opnieuw wanneer de inputselectors andere waarden retourneren. Zo voorkom je dat dure afleidingen bij elke statusupdate worden uitgevoerd wanneer alleen niet-gerelateerde delen van de status zijn veranderd.

import { createSelector } from '@reduxjs/toolkit';
import type { RootState } from './store';

const selectTodos = (state: RootState) => state.todos.items;
const selectFilter = (state: RootState) => state.todos.filter;

export const selectFilteredTodos = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => todos.filter((t) => t.status === filter)
);

Geneste status selecteren

In een selector kun je zo diep als nodig doordringen in de statusstructuur. Koppel propertytoegangen bij complexe statusstructuren zorgvuldig en gebruik optionele chaining (?.) om runtimefouten te voorkomen wanneer een slice nog geen gegevens heeft geladen. Houd selectors leesbaar door ze betekenisvolle namen te geven die beschrijven welke gegevens ze retourneren.

const userName = useAppSelector((state) => state.user.profile?.name ?? 'Guest');
const cartTotal = useAppSelector((state) =>
  state.cart.items.reduce((sum, item) => sum + item.price * item.qty, 0)
);

Meerdere selectors combineren

Een component kan useSelector meerdere keren aanroepen om verschillende delen van de status te lezen. Je kunt de hook ook één keer aanroepen en destructureren uit een selector die een object retourneert. Meerdere aanroepen hebben de voorkeur omdat elke abonnement onafhankelijk is: de component wordt alleen opnieuw gerenderd wanneer een van de geselecteerde waarden daadwerkelijk verandert.

export default function ProfileScreen() {
  const name = useAppSelector((state) => state.user.name);
  const email = useAppSelector((state) => state.user.email);
  const isPremium = useAppSelector((state) => state.subscription.tier === 'premium');

  return (
    <View>
      <Text>{name}</Text>
      <Text>{email}</Text>
      {isPremium && <Text>Premium Member</Text>}
    </View>
  );
}

Patroon voor selectors naast elkaar

Een populair patroon is om selectors in het slice-bestand naast de reducers te definiëren. Geef ze het voorvoegsel select en exporteer ze met hun naam. Door ze op dezelfde plek te definiëren, kun je een selector gemakkelijk vinden en bijwerken wanneer de statusstructuur verandert, omdat zowel de reducer als de selector in hetzelfde bestand staan.

// counterSlice.ts
export const selectCount = (state: RootState) => state.counter.value;
export const selectStatus = (state: RootState) => state.counter.status;

// In component:
import { selectCount, selectStatus } from './counterSlice';
const count = useAppSelector(selectCount);

Objectretourwaarden in useSelector vermijden

Als je vanuit useSelector toch een object moet retourneren, gebruik je de vergelijkingsfunctie shallowEqual als tweede argument. Deze vergelijkt elke property van het geretourneerde object afzonderlijk en voorkomt nieuwe renders wanneer de inhoud van het object niet is veranderd, maar de referentie wel nieuw is. Importeer shallowEqual uit react-redux.

import { useSelector, shallowEqual } from 'react-redux';

const { name, email } = useAppSelector(
  (state) => ({ name: state.user.name, email: state.user.email }),
  shallowEqual
);

useSelector tegenover mapStateToProps

Het oudere patroon met de hogere-ordecomponent connect(mapStateToProps) bereikt hetzelfde doel als useSelector, maar vereist meer extra code. Hooks zijn de moderne aanpak waaraan de voorkeur wordt gegeven, omdat ze minder code vereisen, binnen elke functionele component werken en natuurlijk kunnen worden gecombineerd met andere hooks. De connect-API wordt nog steeds ondersteund, maar wordt niet aanbevolen voor nieuwe code.

Korte controle

Test je begrip van de concepten uit React Native Mobile Development die in deze les aan bod kwamen.

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les heb je geleerd dat useSelector een component abonneert op een deel van de Redux-status en opnieuw rendert wanneer die waarde verandert, dat selectorfuncties logica voor het afleiden van gegevens herbruikbaar en testbaar houden, en dat createSelector dure berekeningen onthoudt om onnodige nieuwe renders te voorkomen. Hierna verkennen we asynchrone thunks met createAsyncThunk.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 30
Lessen: 120

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Status lezen met useSelector” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Status lezen met useSelector”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.

Wat leer ik in “Status lezen met useSelector”?

Gebruik de useSelector-hook om waarden uit de store in een component te lezen en schrijf selectorfuncties die berekende gegevens uit de ruwe status afleiden. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Native Academy te beginnen?

Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Status lezen met useSelector”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Native Academy?

Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar React Native Academy