Teoria

I reducer sono funzioni pure che specificano come lo stato deve cambiare in risposta alle azioni inviate. Prendendo lo stato attuale e un'azione come parametri, i reducer restituiscono il nuovo stato dell'applicazione.

Pratica

Nella cartella reducers del nostro progetto, abbiamo il file counterReducer.js dove definiamo il reducer per la funzionalità del contatore:

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;

Spiegazione del codice:

• Riga 1: Importa la funzione createReducer dal pacchetto @reduxjs/toolkit. Questa funzione viene utilizzata per creare reducer in Redux;
• Riga 2: Importa i creator di azioni increment e decrement dal file ../actions/counterAction.js. Questi creator di azioni vengono utilizzati per definire le azioni che il reducer gestirà;
• Riga 4: Imposta la costante initialState a 0. Questo rappresenta il valore iniziale del contatore nello store Redux;
• Riga 6: Utilizza la funzione createReducer per definire il counterReducer;
• Riga 6-11: La funzione createReducer accetta due argomenti: l'initialState e una funzione di callback che definisce come lo stato deve essere aggiornato in base alle azioni inviate;
• Riga 7: Utilizza l'oggetto builder per definire i casi per le diverse azioni all'interno della funzione di callback;
• Riga 9, 10: Utilizza il metodo addCase dell'oggetto builder per definire come lo stato deve essere aggiornato quando vengono inviate azioni specifiche, come increment e decrement;
• Riga 9, 10: La funzione di callback all'interno di addCase prende lo stato attuale (state) come argomento e restituisce il nuovo stato dopo aver applicato l'azione corrispondente;
• In questo caso, quando viene inviata l'azione increment, lo stato viene incrementato di 1; quando viene inviata l'azione decrement, lo stato viene decrementato di 1;
• Riga 13: Infine, esporta il counterReducer come esportazione predefinita del modulo.

Nota

In sintesi, il counterReducer gestirà le azioni inviate e aggiornerà di conseguenza lo stato del contatore nello store Redux.