Reducer in Redux

Nella lezione precedente, utilizzando la funzione createSlice, abbiamo creato una slice per i prodotti products e un reducer che aggiornerà questa slice, memorizzata nello store. Ricordo ancora una volta che in Redux i dati dello stato vengono modificati tramite i reducer.

Bisogna ricordare che sui reducer vengono imposte una serie di limitazioni. Un reducer aggiorna lo stato solo in base ai valori ricevuti dello stato corrente e dell'oggetto action, e poi decide come modificare lo stato e restituisce il suo nuovo valore.

Sappiamo che per impostazione predefinita gli oggetti e gli array in JavaScript sono mutabili. Inoltre sappiamo che non è possibile modificare lo state direttamente, in tal caso bisogna lavorare solo con copie. Anche il reducer deve obbedire a questa regola. Ma scrivere manualmente questa logica può essere piuttosto noioso e complesso, e qui viene in aiuto la funzione createSlice, che utilizza la libreria Immer, trasformando il tuo codice 'mutabile' in 'immutabile'. Pertanto, è possibile peccare e semplificare la vita solo quando si utilizzano le funzioni createSlice o createReducer.

Tra le limitazioni dei reducer c'è anche l'uso di logica asincrona, il calcolo di valori casuali e l'esecuzione di altri "effetti collaterali". E ora, dopo aver conosciuto più da vicino il reducer, torniamo alla nostra applicazione con i prodotti.

Nella nostra applicazione c'è uno store, che abbiamo creato nelle lezioni precedenti, ma per ora è vuoto. Apriamo il nostro file store.js e aggiungiamoci un po' di codice. Per iniziare, importiamo in esso la funzione reducer per i prodotti:

import productsReducer from '../parts/products/productsSlice'

Ora come reducer possiamo specificare la funzione importata productsReducer:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Con la riga sopra diciamo al nostro store che ora, quando si verifica un'action, tutti i dati per la slice state.products saranno aggiornati dal reducer productsReducer.

Ora puoi avviare l'applicazione (nota che nella console è scomparso l'avviso di reducer non valido!), aprire Redux DevTools nel browser ed esplorare le sue schede. Ad esempio, cliccando sulla scheda State nella scheda Inspector possiamo vedere i nostri due oggetti con i prodotti, che sono stati visualizzati come valore iniziale dello stato al primo avvio dell'applicazione. Nella scheda Log monitor vediamo quali slice contiene lo stato globale - questa è la slice products, che include due oggetti. Dai anche un'occhiata alla scheda Chart.

Apri la tua applicazione con gli studenti e modifica il codice del file store.js, come mostrato nella lezione.

Avvia la tua applicazione nel browser ed esplora le schede dell'estensione Redux DevTools.