Teoria

Reducerit ovat puhtaita funktioita, jotka määrittelevät, miten tila muuttuu lähetettyjen toimintojen perusteella. Ottamalla nykyisen tilan ja toiminnon parametreina, reducerit palauttavat sovelluksen uuden tilan.

Käytännön esimerkki

Projektimme reducers-kansiossa on tiedosto counterReducer.js, jossa määritellään reducer laskuritoiminnallisuudelle:

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;

Koodin selitys:

• Rivi 1: Tuodaan createReducer-funktio @reduxjs/toolkit-paketista. Tätä funktiota käytetään reducerien luomiseen Reduxissa;
• Rivi 2: Tuodaan increment ja decrement action creatorit tiedostosta ../actions/counterAction.js. Näitä action creatoreita käytetään määrittelemään toiminnot, joita reducer käsittelee;
• Rivi 4: Määritellään initialState-vakio arvoksi 0. Tämä edustaa laskurin alkuarvoa Redux-tallennustilassa;
• Rivi 6: Käytetään createReducer-funktiota määrittelemään counterReducer;
• Rivit 6-11: createReducer-funktio ottaa kaksi argumenttia: initialState ja palautefunktion, joka määrittelee, miten tila päivitetään lähetettyjen toimintojen perusteella;
• Rivi 7: Käytetään builder-oliota määrittelemään eri toimintojen tapaukset palautefunktion sisällä;
• Rivit 9, 10: Käytetään addCase-olion builder-metodia määrittelemään, miten tila päivitetään, kun tietyt toiminnot, kuten increment ja decrement, lähetetään;
• Rivit 9, 10: addCase-funktion palautefunktio ottaa nykyisen tilan (state) argumenttina ja palauttaa uuden tilan vastaavan toiminnon jälkeen;
• Tässä tapauksessa, kun increment-toiminto lähetetään, tila kasvaa 1:llä; kun decrement-toiminto lähetetään, tila pienenee 1:llä;
• Rivi 13: Lopuksi viedään counterReducer moduulin oletusvientinä.

Huomio

Yhteenvetona, counterReducer käsittelee lähetetyt toiminnot ja päivittää laskurin tilan vastaavasti Redux-tallennustilassa.