Reducers in Redux

In de vorige les hebben we met behulp van de functie createSlice een slice gemaakt voor producten products en een reducer die deze slice, opgeslagen in de store, zal bijwerken. Ik herinner er nogmaals aan dat in Redux gegevens van de state worden gewijzigd met behulp van reducers.

Het is belangrijk om te onthouden dat er een aantal beperkingen zijn voor reducers. Een reducer werkt de state alleen bij op basis van de ontvangen waarden van de huidige state en het action object, en beslist dan hoe de state moet worden gewijzigd en retourneert de nieuwe waarde.

We weten dat objecten en arrays in JavaScript standaard muteerbaar (veranderbaar) zijn. Ook weten we dat we de state niet direct mogen wijzigen; in dat geval moeten we alleen met kopieën werken. Deze regel moet ook door de reducer worden gevolgd. Maar het handmatig schrijven van dergelijke logica kan behoorlijk vervelend en complex zijn, en hier komt de functie createSlice te hulp, die de bibliotheek Immer gebruikt, die je 'muteerbare' code omzet in 'niet-muteerbare' code. Op deze manier mogen we 'zondigen' en het leven vereenvoudigen alleen bij het gebruik van de functies createSlice of createReducer.

Tot de beperkingen van een reducer behoort ook het gebruik van asynchrone logica, het berekenen van willekeurige waarden en het uitvoeren van andere "side effects". En nu, na kennis te hebben gemaakt met de reducer, keren we terug naar onze applicatie met producten.

In onze applicatie is er een store die we in eerdere lessen hebben gemaakt, maar voorlopig staat er niets in. Laten we ons bestand store.js openen en er een beetje code aan toevoegen. Laten we eerst de reducer functie voor producten importeren:

Nu kunnen we de geïmporteerde functie productsReducer opgeven als reducer:

Met de bovenstaande regel vertellen we onze store dat nu, wanneer een action plaatsvindt, alle gegevens voor de slice state.products zullen worden bijgewerkt door de reducer productsReducer.

Nu kunt u de applicatie starten (merk op dat de waarschuwing over een ongeldige reducer in de console is verdwenen!), open Redux DevTools in de browser en verken de tabbladen. Bijvoorbeeld, door op het tabblad State te klikken in het tabblad Inspector kunnen we onze twee productobjecten zien, die werden weergegeven als de initiële waarde van de state bij de eerste start van de applicatie. Op het tabblad Log monitor zien we welke slices de globaal state bevat - dit is de slice products, met daarin twee objecten. Bekijk ook het tabblad Chart.