Redusere i Redux

I forrige leksjon brukte vi funksjonen createSlice for å opprette en slice for produkter products og en reducer som vil oppdatere denne slicen, lagret i store. Jeg minner igjen om at i Redux endres tilstandsdataene ved hjelp av redusere.

Det må huskes at det er en rekke begrensninger på redusere. En reducer oppdaterer tilstanden kun basert på de mottatte verdiene fra den nåværende tilstanden og action-objektet, og bestemmer deretter hvordan tilstanden skal endres og returnerer dens nye verdi.

Vi vet at objekter og arrays i JavaScript som standard er mutable (foranderlige). Vi vet også at vi ikke kan endre state direkte, i så fall må vi kun jobbe med kopier. Denne regelen må også følges av reducere. Men å skrive slik logikk manuelt kan være ganske slitsomt og komplisert, og her kommer funksjonen createSlice til unnsetning, som bruker biblioteket Immer, som transformerer din 'mutable' kode til 'immutable'. Dermed kan man synde og forenkle livet bare ved bruk av funksjonene createSlice eller createReducer.

Begrensningene på en reducer inkluderer også bruk av asynkron logikk, beregning av tilfeldige verdier og utførelse av andre "side effects". Og nå, etter å ha blitt bedre kjent med reducere, la oss gå tilbake til vår produk-applikasjon.

I applikasjonen vår har vi en store som vi opprettet i tidligere leksjoner, men foreløpig er det ingenting i den. La oss åpne filen store.js og legge til litt kode. La oss først importere reducer-funksjonen for produkter:

Nå kan vi spesifisere den importerte funksjonen productsReducer som reducer:

Med linjen ovenfor forteller vi store vår at nå, når en action oppstår, vil alle data for slicen state.products blitt oppdatert av reduceren productsReducer.

Nå kan du starte applikasjonen (legg merke til at advarselen om ugyldig reducer har forsvunnet i konsollen!), åpne Redux DevTools i nettleseren og utforske fanene. For eksempel, ved å klikke på State-fanen i Inspector-fanen kan vi se de to produktobjektene våre, som ble vist som startverdien for state ved første oppstart av applikasjonen. På Log monitor-fanen ser vi hvilke slicer den globale staten har - dette er products-slicen, som inkluderer to objekter. Ta også en titt på Chart-fanen.