Preparazione dei dati per l'oggetto action in Redux

Recentemente abbiamo parlato del fatto che la funzione createSlice si aspetta un singolo argomento durante la creazione di action.payload. Da un lato questo semplifica il suo utilizzo, dall'altro potrebbe richiedere operazioni aggiuntive per preparare il contenuto dell'oggetto action.

Apriamo la nostra applicazione dei prodotti, e in essa il file NewProductForm.jsx. Prestate attenzione alla seguente riga di codice:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Qui stiamo assemblando l'oggetto payload direttamente nel componente React e lo passiamo all'azione productAdded. E se dovessimo inviare la stessa azione da diversi componenti o la logica per l'assemblaggio risultasse complessa? In teoria, al nostro componente non dovrebbe importare come appare l'oggetto in payload per questa azione. Inoltre, non ci piace la costante duplicazione del codice.

Questi problemi possono essere nuovamente risolti dal nostro famoso createSlice, poiché durante la scrittura del reducer ci permette di utilizzare la funzione callback prepare, in cui possiamo scrivere varie logiche, generare numeri casuali e altro ancora. In questo caso, il valore per il campo del reducer può essere rappresentato come il seguente oggetto:

{reducer, prepare}

Apriamo il nostro file productsSlice.js e modifichiamo il codice per il reducer productAdded. Ora questo frammento di codice:

productAdded(state, action) {
	state.push(action.payload)
},

Lo cambieremo nel seguente, in cui la funzione reducer si occuperà dell'aggiornamento dello state nello store, e prepare - restituirà l'oggetto payload con l'id generato e i nostri altri dati:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Dato che ora genereremo l'id qui, e non nel componente, aggiungiamo nanoid nell'import:

import { createSlice, nanoid } from '@reduxjs/toolkit'

Infine, apportiamo le modifiche in NewProductForm.jsx. Invece della riga:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Avremo questa, in cui semplicemente passiamo, separati da virgola, i dati necessari (non dimenticate in questo file di rimuovere nanoid dall'import):

dispatch(productAdded(name, desc, price, amount))

Avviamo l'applicazione, creiamo un nuovo prodotto e assicuriamoci di non aver rotto nulla.

Aprite la vostra applicazione con gli studenti. Nel file StudentsSlice.js riscrivete il vostro reducer studentAdded in modo che sia sotto forma di oggetto {reducer, prepare}, come mostrato nella lezione.

Apportate le modifiche corrispondenti nel file NewStudentForm.jsx, come mostrato nella lezione. Avviate l'applicazione e assicuratevi che tutto funzioni come prima.