Teori

Reducers är rena funktioner som specificerar hur tillståndet ska förändras som svar på skickade actions. Genom att ta in det aktuella tillståndet och en action som parametrar returnerar reducers det nya tillståndet för applikationen.

Praktik

I projektets reducers-mapp finns filen counterReducer.js där vi definierar reducern för vår räknarfunktionalitet:

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;

Kodförklaring:

• Rad 1: Importera funktionen createReducer från paketet @reduxjs/toolkit. Denna funktion används för att skapa reducers i Redux;
• Rad 2: Importera action creators increment och decrement från filen ../actions/counterAction.js. Dessa action creators används för att definiera de actions som reducern ska hantera;
• Rad 4: Sätt konstanten initialState till 0. Detta representerar det initiala värdet för räknaren i Redux store;
• Rad 6: Använd funktionen createReducer för att definiera counterReducer;
• Rad 6-11: Funktionen createReducer tar två argument: initialState och en callback-funktion som definierar hur tillståndet ska uppdateras baserat på skickade actions;
• Rad 7: Använd objektet builder för att definiera fall för olika actions inuti callback-funktionen;
• Rad 9, 10: Använd metoden addCase på objektet builder för att definiera hur tillståndet ska uppdateras när specifika actions, såsom increment och decrement, skickas;
• Rad 9, 10: Callback-funktionen inuti addCase tar det aktuella tillståndet (state) som argument och returnerar det nya tillståndet efter att motsvarande action har tillämpats;
• I detta fall, när action increment skickas, ökas tillståndet med 1; när action decrement skickas, minskas tillståndet med 1;
• Rad 13: Slutligen exporteras counterReducer som standardexport från modulen.

Notera

Sammanfattningsvis kommer counterReducer att hantera de skickade actions och uppdatera räknarens tillstånd i Redux store därefter.