Slanje podataka pomoću thunk-a u Redux-u

Na prošlom času smo razgovarali o obradi POST zahteva na našem lažnom serveru. Hajde sada da napišemo thunk-funkciju koja će slati zahtev serveru.

Otvorimo našu aplikaciju sa proizvodima, a u niej datoteku productsSlice.js. Sada posle thunk-a fetchProducts ćemo uz pomoć createAsyncThunk kreirati thunk addProduct:

export const addProduct = createAsyncThunk()

Kao prvi parametar ćemo proslediti u createAsyncThunk 'products/addProduct', a kao drugi asinhroni callback, koji će prihvatati objekat sa podacima novog proizvoda:

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

U kodu ovog callback-a pozvaćemo klijenta, prosledivši mu kao parametre putanju i objekat sa proizvodom, a zatim vratiti podatke odgovora:

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

Sada ispod u kodu pogledajmo polje reducers za productsSlice. Ranije smo dodavali novi proizvod pomoću reducer-a productAdded, u kojem smo imali metode reducer i prepare. Sada mi generišemo potrebne podatke na serveru i radimo sa thunk-om, zato ćemo ovde u potpunosti ukloniti reducer productAdded iz koda. A zatim uneti u metod extraReducers (na kraj njegovog koda) još jedan dodatni reducer, koji u slučaju uspešnog zahteva dodaje u slice products novi proizvod direktno iz payload akcije (sećamo se, da je ovakav kod moguć samo zahvaljujući jedinstvenom createSlice):

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

Da, usput, ne zaboravite da uklonite nanoid iz linija sa import-om, a productAdded iz eksporta akcija na kraju datoteke.

Otvorite vašu aplikaciju sa studentima. Otvorite u njoj datoteku studentsSlice.js. Uz pomoć createAsyncThunk kreirajte još jedan thunk addStudent, koji će slati POST zahtev serveru, kako bi dodao novog studenta, kao što je prikazano na času.

Zatim ispod unesite izmene za studentsSlice: u potpunosti uklonite reducer studentAdded u svojstvu reducers. A u polju extraReducers dodajte dodatni reducer, koji će dodavati novog studenta u slice students iz payload akcije u slučaju uspešnog zahteva, kao što je prikazano na času.