Teori

Reducers er rene funktioner, der angiver, hvordan tilstanden skal ændres som reaktion på udsendte handlinger. Ved at tage den nuværende tilstand og en handling som parametre returnerer reducers den nye tilstand for applikationen.

Praksis

I projektets reducers-mappe findes filen counterReducer.js, hvor vi definerer reduceren til vores tællerfunktionalitet:

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;

Kodeforklaring:

• Linje 1: Importér funktionen createReducer fra pakken @reduxjs/toolkit. Denne funktion bruges til at oprette reducers i Redux;
• Linje 2: Importér action creators increment og decrement fra filen ../actions/counterAction.js. Disse action creators bruges til at definere de handlinger, som reduceren skal håndtere;
• Linje 4: Sæt konstanten initialState til 0. Dette repræsenterer den indledende værdi af tælleren i Redux store;
• Linje 6: Brug funktionen createReducer til at definere counterReducer;
• Linje 6-11: Funktionen createReducer tager to argumenter: initialState og en callback-funktion, der definerer, hvordan tilstanden skal opdateres baseret på udsendte handlinger;
• Linje 7: Brug objektet builder til at definere cases for forskellige handlinger inde i callback-funktionen;
• Linje 9, 10: Brug metoden addCase på builder-objektet til at definere, hvordan tilstanden skal opdateres, når specifikke handlinger som increment og decrement udsendes;
• Linje 9, 10: Callback-funktionen inde i addCase tager den nuværende tilstand (state) som argument og returnerer den nye tilstand efter at have anvendt den tilsvarende handling;
• I dette tilfælde, når handlingen increment udsendes, øges tilstanden med 1; når handlingen decrement udsendes, mindskes tilstanden med 1;
• Linje 13: Til sidst eksporteres counterReducer som standardeksporten af modulet.

Bemærk

Sammenfattende vil counterReducer håndtere de udsendte handlinger og opdatere tællertilstanden tilsvarende i Redux store.