Reducer e action in Redux

Nella lezione precedente abbiamo completato il modulo per aggiungere un prodotto e lo abbiamo visualizzato sulla pagina principale. Ma per ora i dati aggiunti non vengono salvati, in altre parole il nuovo prodotto non viene aggiunto a quelli esistenti nello store. Sistemiamo questo.

Per iniziare, nella nostra applicazione dei prodotti apriremo il file productsSlice.jsx e scriveremo nella proprietà reducer per createSlice la funzione productAdded, che si occuperà di aggiungere il prodotto allo store sulla base dello stato corrente e dell'azione che le vengono passati. È importante notare che qui non ci viene passato l'intero state, ma solo la parte che riguarda i prodotti (lo slice products conosce solo quella). L'oggetto con il nuovo prodotto sarà nella proprietà payload dell'oggetto action, che verrà generato dal gestore dell'evento al click del pulsante di salvataggio nel modulo. Di conseguenza, il reducer productAdded apparirà nel codice di createSlice così:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

E per quanto riguarda l'action? All'inizio del tutorial abbiamo menzionato che un action è un evento, rappresentato come un oggetto, che descrive ciò che è accaduto nell'applicazione. Abbiamo anche parlato del fatto che si può usare una funzione action creator, che creerà per noi un tale oggetto, ad esempio così:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

La buona notizia è che non dobbiamo fare nulla, perché lo farà per noi la funzione createSlice che stiamo utilizzando. Non appena scriviamo un reducer, essa creerà automaticamente per noi un action creator con lo stesso nome. A noi non resta che esportare l'action creator ottenuto per un uso successivo nei componenti. Facciamolo alla fine del file prima dell'esportazione del reducer, in questo modo:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Apri la tua applicazione con gli studenti, poi il file studentsSlice.jsx, aggiungi il valore del campo reducer per createSlice, come mostrato nella lezione.

Aggiungi alla fine del file studentsSlice.jsx l'esportazione della funzione action creator ottenuta.