Trimiterea datelor folosind thunk în Redux

În lecția precedentă, am analizat procesarea unei cereri POST pe serverul nostru fals. Să scriem acum o funcție thunk care va trimite cererea către server.

Să deschidem aplicația noastră cu produse, iar în ea fișierul productsSlice.js. Acum, după thunk-ul fetchProducts, cu ajutorul createAsyncThunk vom crea thunk-ul addProduct:

export const addProduct = createAsyncThunk()

Ca prim parametru, vom transmite către createAsyncThunk 'products/addProduct', iar ca al doilea, un callback asincron care va primi un obiect cu datele noului produs:

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

În codul acestui callback, vom apela clientul, transmițându-i ca parametri calea și obiectul cu produsul, apoi vom returna datele răspunsului:

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

Acum, mai jos în cod, să ne uităm la câmpul reducers pentru productsSlice. Anterior, adăugam un nou produs folosind reducer-ul productAdded, în care aveam metodele reducer și prepare. Acum generăm datele necesare pe server și lucrăm cu thunk, așa că vom elimina complet de aici reducer-ul productAdded din cod. Apoi vom adăuga în metoda extraReducers (la sfârșitul codului său) încă un reducer suplimentar, care în cazul unei cereri de succes va adăuga în slice-ul products noul produs direct din payload acțiunii (ținem minte că un astfel de cod este posibil datorită unicului createSlice):

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

Da, apropo, nu uitați să eliminați nanoid din liniile de import, iar productAdded din exportul acțiunilor la sfârșitul fișierului.

Deschideți aplicația voastră cu studenți. Deschideți în ea fișierul studentsSlice.js. Cu ajutorul createAsyncThunk creați încă un thunk addStudent, care va trimite o cerere POST către server, pentru a adăuga un nou student, așa cum este arătat în lecție.

Apoi, mai jos, faceți modificări pentru studentsSlice: eliminați complet reducer-ul studentAdded din proprietatea reducers. Iar în câmpul extraReducers adăugați un reducer suplimentar, care va adăuga un nou student în slice-ul students din payload acțiunii în cazul unei cereri de succes, așa cum este arătat în lecție.