Theorie

Reducers zijn pure functies die specificeren hoe de status moet veranderen als reactie op verzonden acties. Door de huidige status en een actie als parameters te nemen, geven reducers de nieuwe status van de applicatie terug.

Praktijk

In de reducers-map van ons project bevindt zich het bestand counterReducer.js waarin we de reducer voor onze tellerfunctionaliteit definiëren:

import { createReducer } from "@reduxjs/toolkit";
import { increment, decrement } from "../actions/counterAction.js";

const initialState = 0;

const counterReducer = createReducer(initialState,
  (builder) => {
    builder
      .addCase(increment, (state) => state + 1)
      .addCase(decrement, (state) => state - 1);
});

export default counterReducer;

Uitleg van de code:

• Regel 1: Importeer de functie createReducer uit het pakket @reduxjs/toolkit. Deze functie wordt gebruikt om reducers in Redux te maken;
• Regel 2: Importeer de action creators increment en decrement uit het bestand ../actions/counterAction.js. Deze action creators worden gebruikt om de acties te definiëren die de reducer zal afhandelen;
• Regel 4: Stel de constante initialState in op 0. Dit vertegenwoordigt de beginwaarde van de teller in de Redux store;
• Regel 6: Gebruik de functie createReducer om de counterReducer te definiëren;
• Regel 6-11: De functie createReducer neemt twee argumenten: de initialState en een callbackfunctie die definieert hoe de status moet worden bijgewerkt op basis van verzonden acties;
• Regel 7: Gebruik het builder-object om de gevallen voor verschillende acties binnen de callbackfunctie te definiëren;
• Regel 9, 10: Gebruik de methode addCase van het builder-object om te definiëren hoe de status moet worden bijgewerkt wanneer specifieke acties, zoals increment en decrement, worden verzonden;
• Regel 9, 10: De callbackfunctie binnen addCase neemt de huidige status (state) als argument en retourneert de nieuwe status na het toepassen van de bijbehorende actie;
• In dit geval wordt bij het verzenden van de increment-actie de status met 1 verhoogd; bij het verzenden van de decrement-actie wordt de status met 1 verlaagd;
• Regel 13: Exporteer ten slotte de counterReducer als de standaardexport van de module.

Opmerking

Samengevat zal de counterReducer de verzonden acties afhandelen en de tellerstatus dienovereenkomstig bijwerken in de Redux store.