Reducere i Redux

I den forrige lektion oprettede vi ved hjælp af funktionen createSlice en slice for produkter products og en reducer, som vil opdatere denne slice, der opbevares i store. Jeg minder lige om, at data i Redux-tilstanden ændres ved hjælp af reducere.

Det er vigtigt at huske, at der er en række begrænsninger for reducere. En reducer opdaterer kun tilstanden baseret på de modtagne værdier af den nuværende tilstand og action-objektet, og beslutter derefter, hvordan tilstanden skal ændres og returnerer dens nye værdi.

Vi ved, at objekter og arrays i JavaScript som standard er mutable (kan ændres). Vi ved også, at man ikke må ændre state direkte, i så fald skal man kun arbejde med kopier. Denne regel skal reduceren også overholde. Men at skrive sådan logik manuelt kan være ret trættende og kompliceret, og her kommer funktionen createSlice til undsætning, som bruger biblioteket Immer, der omdanner din 'mutable' kode til 'immutable'. På den måde kan man kun 'synde' og forenkle livet, når man bruger funktionerne createSlice eller createReducer.

Begrænsningerne for en reducer omfatter også at bruge asynkron logik, at beregne tilfældige værdier og at udføre andre "side effects". Og nu, efter at have lært reduceren bedre at kende, lader vi os vende tilbage til vores applikation med produkter.

I vores applikation har vi en store, som vi oprettede i de foregående lektioner, men indtil videre er der intet i den. Lad os åbne vores fil store.js og tilføje en smule kode. Til at starte med importerer vi reducer-funktionen for produkter:

Nu kan vi som reducer angive den importerede funktion productsReducer:

Med ovenstående linje fortæller vi vores store, at nu, når en action opstår, vil alle data for slicen state.products blive opdateret af reduceren productsReducer.

Nu kan du starte applikationen (bemærk, at advarslen om en ugyldig reducer er forsvundet fra konsollen!), åbne Redux DevTools i browseren og udforske dens faner. For eksempel, ved at klikke på fanen State under Inspector-fanen kan vi se vores to produktobjekter, som blev vist som startværdien for tilstanden, da applikationen startede for første gang. Under fanen Log monitor ser vi hvilke slices den globale tilstand har - det er slicen products, som indeholder to objekter. Kig også på fanen Chart.