Invio dei dati utilizzando thunk in Redux

Nella lezione precedente abbiamo analizzato l'elaborazione di una richiesta POST sul nostro server fittizio. Ora scriviamo una funzione thunk che invierà la richiesta al server.

Apriamo la nostra applicazione di prodotti, e in essa il file productsSlice.js. Ora, dopo il thunk fetchProducts, utilizzando createAsyncThunk, creeremo il thunk addProduct:

export const addProduct = createAsyncThunk()

Come primo parametro passeremo a createAsyncThunk 'products/addProduct', e come secondo una callback asincrona, che accetterà un oggetto con i dati del nuovo prodotto:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

Nel codice di questa callback chiameremo il client, passandogli come parametri il percorso e l'oggetto con il prodotto, e poi restituiremo i dati della risposta:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {
		const response = await client.post('/fakeServer/products', newProduct)
		return response.data
	}
)

Ora più in basso nel codice guardiamo il campo reducers per productsSlice. In precedenza aggiungevamo un nuovo prodotto utilizzando il reducer productAdded, in cui avevamo i metodi reducer e prepare. Ora generiamo i dati necessari sul server e lavoriamo con i thunk, quindi rimuoviamo completamente da qui il reducer productAdded dal codice. E poi aggiungiamo nel metodo extraReducers (alla fine del suo codice) un altro reducer aggiuntivo, che in caso di richiesta riuscita aggiungerà allo slice products il nuovo prodotto direttamente dal payload dell'azione (ricordiamo che tale codice è possibile solo grazie all'impareggiabile createSlice):

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

Sì, a proposito, non dimenticate di rimuovere nanoid dalle righe di importazione, e productAdded dall'esportazione delle azioni alla fine del file.

Aprite la vostra applicazione con gli studenti. Aprite in essa il file studentsSlice.js. Utilizzando createAsyncThunk create un altro thunk addStudent, che invierà una richiesta POST al server per aggiungere un nuovo studente, come mostrato nella lezione.

Successivamente, più in basso, apportate le modifiche per studentsSlice: rimuovete completamente il reducer studentAdded nella proprietà reducers. E nel campo extraReducers aggiungete un reducer aggiuntivo, che aggiungerà un nuovo studente allo slice students dal payload dell'azione in caso di richiesta riuscita, come mostrato nella lezione.