React Native Academy · leksjon

Lese tilstand med useSelector

Bruk useSelector-hooken til å lese verdier fra store-en i en komponent, og skriv selector-funksjoner som utleder beregnede data fra råtilstanden.

Leksjon 3 av 413 trinn

Lese tilstand med useSelector er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva er useSelector?

useSelector er en hook fra react-redux som lar en komponent lese data fra Redux-store. Den tar imot en selector-funksjon som argument. Selectoren mottar hele root-tilstanden og returnerer bare den delen av dataene komponenten trenger. Når denne delen av dataene endres, rendrer React automatisk komponenten på nytt.

Grunnleggende bruk av useSelector

Kall useSelector inne i en funksjonell komponent, og send inn en pilfunksjon som henter ut verdien du trenger, fra den globale tilstanden. Hooken abonnerer på store-en og utløser en ny gjengivelse bare når den valgte verdien endres. Dermed unngår du unødvendige gjengivelser når urelaterte deler av tilstanden oppdateres.

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>
  );
}

Bruke en typet useAppSelector

I TypeScript-prosjekter bruker du den forhåndstypede useAppSelector-hooken du opprettet i hooks-filen. Da slipper du å angi typen til state-parameteren hver gang du kaller hooken. Redigeringsverktøyet fullfører også navn på tilstandsegenskaper automatisk, slik at det går raskere å skrive riktige selektorer.

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>;
}

Hva er en selektorfunksjon?

En selektor er ganske enkelt en funksjon som tar Redux-tilstanden som argument og returnerer en avledet verdi. Når selektorer holdes atskilt fra komponentene, blir de enklere å gjenbruke – mange komponenter kan bruke den samme selektoren. Du kan også sette sammen selektorer for å utlede mer komplekse beregnede verdier fra rådata i tilstanden.

// 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);

Gjengivelsesatferd for useSelector

useSelector bruker streng likhet (===) til å sammenligne den forrige og den neste valgte verdien. Komponenten gjengis på nytt bare når den returnerte verdien endres. Hvis selektoren returnerer et objekt eller en array-literal, for eksempel state.items.filter(...), returneres en ny referanse ved hvert kall, noe som fører til unødvendige gjengivelser. La selektorer returnere primitive verdier, eller memoiser dem.

// 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

Memoiserte selektorer med reselect

reselect-biblioteket (som er inkludert i RTK) tilbyr createSelector for å bygge memoiserte selektorer. En memoiserte selektor mellomlagrer det siste resultatet og beregner det bare på nytt når inndataselektorene returnerer andre verdier. Dette hindrer kostbare avledninger i å kjøre ved hver tilstandsoppdatering når bare urelaterte deler av tilstanden er endret.

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)
);

Velge nestet tilstand

Du kan gå så dypt du trenger i tilstandstreet inne i en selektor. For komplekse tilstandsstrukturer bør du lenke egenskapstilganger forsiktig og håndtere optional chaining (?.) for å unngå kjøretidsfeil hvis en slice ennå ikke har lastet inn data. Hold selektorene lesbare ved å gi dem beskrivende navn som forteller hvilke data de returnerer.

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)
);

Kombinere flere selektorer

En enkelt komponent kan kalle useSelector flere ganger for å lese ulike deler av tilstanden. Alternativt kan du kalle den én gang og destrukturere resultatet fra en selektor som returnerer et objekt. Det anbefales å kalle den flere ganger fordi hvert abonnement er uavhengig – komponenten gjengis bare på nytt når en av de valgte verdiene faktisk endres.

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>
  );
}

Mønster for samlokalisering av selektorer

Et utbredt mønster er å definere selektorer inne i slice-filen, sammen med reducerne. Gi dem prefikset select, og eksporter dem med navngitte eksporter. Denne samlokaliseringen gjør det enkelt å finne og oppdatere en selektor hvis tilstandsstrukturen endres, siden både reduceren og selektoren ligger i samme fil.

// 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);

Unngå objekter som returverdi i useSelector

Hvis du må returnere et objekt fra useSelector, bruker du shallowEqual-sammenligningen som det andre argumentet. Den sammenligner hver egenskap i det returnerte objektet separat, slik at gjengivelser unngås når innholdet i objektet ikke er endret, men referansen er ny. Importer shallowEqual fra react-redux.

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

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

useSelector kontra mapStateToProps

Det eldre mønsteret med higher-order-komponenten connect(mapStateToProps) oppnår det samme som useSelector, men krever mer boilerplate-kode. Hooks er den moderne og anbefalte tilnærmingen fordi de krever mindre kode, fungerer i alle funksjonelle komponenter og settes naturlig sammen med andre hooks. connect-API-et støttes fortsatt, men anbefales ikke for ny kode.

Hurtigsjekk

Test forståelsen din av konseptene innen React Native Mobile Development fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen lærte du at useSelector abonnerer på en komponent på en del av Redux-tilstanden og gjengir den på nytt når denne verdien endres, at selektorfunksjoner gjør logikk for dataavledning gjenbrukbar og testbar, og at createSelector memoiserer kostbare beregninger for å hindre unødvendige gjengivelser. Deretter skal vi utforske asynkrone thunker med createAsyncThunk.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Lese tilstand med useSelector» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Lese tilstand med useSelector», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Lese tilstand med useSelector»?

Bruk useSelector-hooken til å lese verdier fra store-en i en komponent, og skriv selector-funksjoner som utleder beregnede data fra råtilstanden. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Native Academy?

Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Lese tilstand med useSelector»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?

Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Native Academy