Teori

Redusere er rene funksjoner som spesifiserer hvordan tilstanden skal endres som respons på sendte handlinger. Ved å ta inn gjeldende tilstand og en handling som parametere, returnerer redusere den nye tilstanden til applikasjonen.

Praksis

I prosjektets reducers-mappe har vi filen counterReducer.js hvor vi definerer reduseren for tellefunksjonaliteten vår:

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: Importerer funksjonen createReducer fra pakken @reduxjs/toolkit. Denne funksjonen brukes til å lage redusere i Redux;
• Linje 2: Importerer increment og decrement action creators fra filen ../actions/counterAction.js. Disse action creators brukes til å definere handlingene som reduseren skal håndtere;
• Linje 4: Setter konstanten initialState til 0. Dette representerer startverdien til telleren i Redux store;
• Linje 6: Bruker funksjonen createReducer for å definere counterReducer;
• Linje 6-11: Funksjonen createReducer tar to argumenter: initialState og en callback-funksjon som definerer hvordan tilstanden skal oppdateres basert på sendte handlinger;
• Linje 7: Bruker objektet builder for å definere tilfeller for ulike handlinger inne i callback-funksjonen;
• Linje 9, 10: Bruker metoden addCase til builder-objektet for å definere hvordan tilstanden skal oppdateres når spesifikke handlinger, som increment og decrement, sendes;
• Linje 9, 10: Callback-funksjonen inne i addCase tar gjeldende tilstand (state) som et argument og returnerer den nye tilstanden etter å ha brukt den tilsvarende handlingen;
• I dette tilfellet, når handlingen increment sendes, økes tilstanden med 1; når handlingen decrement sendes, reduseres tilstanden med 1;
• Linje 13: Til slutt eksporteres counterReducer som standardeksport for modulen.

Merk

Oppsummert vil counterReducer håndtere de sendte handlingene og oppdatere tellerens tilstand tilsvarende i Redux store.