React Native Academy · Oppitunti

Tilan lukeminen useSelectorilla

Lukekaa storen arvoja komponentissa useSelector-hookilla ja kirjoittakaa selector-funktioita, jotka johtavat laskettuja tietoja raakatilasta.

Oppitunti 3/413 vaihetta

Tilan lukeminen useSelectorilla on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mikä useSelector on?

useSelector on react-redux-paketin hook, jonka avulla komponentti voi lukea tietoja Redux-storesta. Se hyväksyy argumentikseen selector-funktion. Selectori vastaanottaa koko juuritilan ja palauttaa vain sen tietopalan, jota komponentti tarvitsee. Kun kyseinen tietopala muuttuu, React renderöi komponentin automaattisesti uudelleen.

useSelectorin peruskäyttö

Kutsu useSelector-hookia funktionaalisen komponentin sisällä ja välitä sille nuolifunktio, joka poimii tarvitsemasi arvon globaalista tilasta. Hook tilaa storeen ja käynnistää uudelleenrenderöinnin vain, kun valittu arvo muuttuu. Näin vältetään tarpeettomat uudelleenrenderöinnit, jos tilan toisistaan riippumattomat osat päivittyvät.

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

Tyypitetyn useAppSelector-hookin käyttäminen

Käyttäkää TypeScript-projekteissa hooks-tiedostossa luotua valmiiksi tyypitettyä useAppSelector-hookia. Tällöin tilaparametria ei tarvitse tyypittää erikseen jokaisella hookin kutsukerralla. Editori täydentää myös tilan ominaisuuksien nimet automaattisesti, joten selectoreiden kirjoittaminen oikein nopeutuu.

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

Mikä on selector-funktio?

Selector on yksinkertaisesti funktio, joka saa Redux-tilan argumenttina ja palauttaa siitä johdetun arvon. Kun selectorit pidetään erillään komponenteista, niitä voidaan käyttää uudelleen — samaa selectoria voi käyttää usea komponentti. Selectoreita voi myös yhdistää, jolloin raakadatan perusteella voidaan muodostaa monimutkaisempia laskettuja arvoja.

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

useSelectorin uudelleenrenderöintikäyttäytyminen

useSelector vertaa aiempia ja uusia valittuja arvoja strict equality (===) -vertailulla. Komponentti renderöidään uudelleen vain, jos palautettu arvo muuttuu. Jos selector palauttaa objekti- tai taulukkoliteraalin, kuten state.items.filter(...), se palauttaa jokaisella kutsukerralla uuden viitteen ja aiheuttaa tarpeettomia uudelleenrenderöintejä. Palauttakaa selectoreista primitiiviarvoja tai memoisoikaa ne.

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

Memoisoidut selectorit reselect-kirjastolla

reselect-kirjasto, joka sisältyy RTK:hon, tarjoaa createSelector-funktion memoisoitujen selectoreiden rakentamiseen. Memoisoitu selector tallentaa viimeisimmän tuloksensa välimuistiin ja laskee sen uudelleen vain, jos sen input-selectorit palauttavat eri arvot. Näin raskaita johdantoja ei suoriteta jokaisen tilapäivityksen yhteydessä, kun vain tilan toisistaan riippumattomat osat ovat muuttuneet.

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

Sisäkkäisen tilan valitseminen

Voitte edetä selectorissa tilapuussa niin syvälle kuin on tarpeen. Monimutkaisten tilarakenteiden kohdalla ketjuttakaa ominaisuuksien käyttö huolellisesti ja käsitelkää optional chaining -syntaksi (?.), jotta ajonaikaiset virheet vältetään, jos slice ei ole vielä ladannut dataa. Pitäkää selectorit selkeinä antamalla niille kuvaavat nimet, jotka kertovat, mitä dataa ne palauttavat.

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

Useiden selectoreiden yhdistäminen

Yksi komponentti voi kutsua useSelector-hookia useita kertoja lukeakseen tilan eri osia. Vaihtoehtoisesti hookia voi kutsua kerran ja purkaa objektin ominaisuudet selectorista, joka palauttaa objektin. Useita kutsuja suositellaan, koska jokainen tilaus on itsenäinen — komponentti renderöidään uudelleen vain, kun jokin valituista arvoista todella muuttuu.

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

Selectorien sijoittaminen samaan tiedostoon

Suosittu käytäntö on määritellä selectorit slice-tiedoston sisällä reducerien rinnalle. Lisätkää niiden nimeen etuliite select ja viekää ne nimettyinä exporteina. Samaan tiedostoon sijoittaminen helpottaa selectorin löytämistä ja päivittämistä, jos tilan rakenne muuttuu, koska sekä reducer että selector ovat samassa tiedostossa.

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

Objektien palauttamisen välttäminen useSelectorissa

Jos useSelector-hookista on palautettava objekti, käyttäkää toisena argumenttina shallowEqual-vertailijaa. Se vertaa palautetun objektin jokaista ominaisuutta erikseen ja estää uudelleenrenderöinnit silloin, kun objektin sisältö ei ole muuttunut, mutta viite on uusi. Tuokaa shallowEqual moduulista react-redux.

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

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

useSelector vs mapStateToProps

Vanhempi connect(mapStateToProps)-korkeamman asteen komponenttimalli saavuttaa saman tavoitteen kuin useSelector, mutta vaatii enemmän ylimääräistä koodia. Hookit ovat nykyaikainen ja suositeltu lähestymistapa, koska ne vaativat vähemmän koodia, toimivat missä tahansa funktionaalisessa komponentissa ja yhdistyvät luontevasti muihin hookeihin. connect-rajapintaa tuetaan edelleen, mutta sitä ei suositella uuteen koodiin.

Pikatarkistus

Testatkaa, kuinka hyvin ymmärrätte tämän oppitunnin React Native Mobile Development -käsitteet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin kertaus

Tässä oppitunnissa opitte, että useSelector tilaa komponentin Redux-tilan osaan ja renderöi komponentin uudelleen, kun kyseinen arvo muuttuu, selector-funktiot tekevät datan johtamislogiikasta uudelleenkäytettävää ja testattavaa, ja createSelector memoisee raskaat laskutoimitukset tarpeettomien uudelleenrenderöintien estämiseksi. Seuraavaksi tutustumme asynkronisiin thunk-toimintoihin ja createAsyncThunk-funktioon.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tilan lukeminen useSelectorilla” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tilan lukeminen useSelectorilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tilan lukeminen useSelectorilla”?

Lukekaa storen arvoja komponentissa useSelector-hookilla ja kirjoittakaa selector-funktioita, jotka johtavat laskettuja tietoja raakatilasta. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Tilan lukeminen useSelectorilla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Redux-storen ja Providerin määrittäminen
Slicejen luominen createSlicella
Tilan lukeminen useSelectorilla
Asynkroniset thunkit createAsyncThunkilla

← Takaisin: React Native Academy