Teoria

In Redux, lo store funge da unica fonte di verità per lo stato di un'applicazione. Contiene l'intero albero dello stato ed è immutabile. Per modificare lo stato, è necessario inviare delle azioni. Utilizzando le funzioni e gli hook di Redux Toolkit, è possibile accedere e modificare facilmente lo store.

Pratica

Abbiamo creato il file store.js nella cartella redux. Siamo pronti per configurare l'intero store. Ecco un esempio di come può essere fatto:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./reducers/counterReducer";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Spiegazione del codice: Questo codice configura lo store Redux utilizzando la funzione configureStore fornita dal pacchetto @reduxjs/toolkit. Analizziamolo passo dopo passo.

• Riga 1: Il codice importa la funzione configureStore dal pacchetto @reduxjs/toolkit. Questa funzione semplifica il processo di creazione di uno store Redux fornendo impostazioni predefinite e middleware integrati;
• Riga 2: importa il counterReducer dal file ./reducers/counterReducer. Questa funzione reducer gestisce le modifiche di stato per la slice "counter" dello store Redux. La logica all'interno di quel file verrà creata successivamente;
• Riga 4-8: La funzione configureStore viene chiamata con un oggetto come argomento. Questo oggetto specifica le opzioni di configurazione dello store. In questo caso, l'opzione reducer è l'unica opzione (Riga 5);
  • L'opzione reducer è un oggetto che mappa le slice dello stato alle rispettive funzioni reducer. In questo caso, la slice counter dello stato è associata alla funzione counterReducer;
  • La funzione configureStore restituisce un oggetto store Redux che contiene lo stato dell'applicazione e fornisce metodi per interagire con esso.
• Riga 10: Infine, l'oggetto store viene esportato come export di default di questo modulo, in modo che possa essere utilizzato in altre parti dell'applicazione.

Nota

In sintesi, questo codice configura uno store Redux con una singola slice dello stato chiamata "counter", utilizzando il counterReducer per gestire le modifiche dello stato. Lo store risultante viene poi esportato per essere utilizzato in altre parti dell'applicazione.