Pošiljanje podatkov z uporabo thunk v Redux

V prejšnji lekciji smo obravnavali obdelavo POST zahteve na našem lažnem strežniku. Zdaj napišimo thunk-funkcijo, ki bo pošiljala zahtevo na strežnik.

Odprimo našo aplikacijo s produkti, in v njej datoteko productsSlice.js. Zdaj po thunk fetchProducts bomo s pomočjo createAsyncThunk ustvarili thunk addProduct:

export const addProduct = createAsyncThunk()

Kot prvi parameter bomo v createAsyncThunk podali 'products/addProduct', kot drugega pa asinhroni callback, ki bo sprejel objekt z podatki novega produkta:

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

V kodi tega klica bomo poklicali odjemalca, mu podali pot in objekt z produktom kot parametra, nato pa vrnili podatke odgovora:

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

Zdaj pa poglejmo spodaj v kodi polje reducers za productsSlice. Prej smo dodajali nov produkt z uporabo reducerja productAdded, v katerem smo imeli metode reducer in prepare. Zdaj ustrezne podatke generiramo na strežniku in delamo z thunk, zato bomo tukaj popolnoma odstranili reducer productAdded iz kode. Nato bomo v metodo extraReducers (na konec njegove kode) dodali še en dodaten reducer, ki bo v primeru uspešne zahteve dodal v slice products nov produkt direktno iz payload akcije (spomnimo se, da je takšna koda možna le zahvaljujoč edinstvenemu createSlice):

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

Da, mimogrede, ne pozabite odstraniti nanoid iz vrstic z importi, in productAdded iz eksporta akcij na koncu datoteke.

Odprite vašo aplikacijo s študenti. Odprite v njej datoteko studentsSlice.js. S pomočjo createAsyncThunk ustvarite še en thunk addStudent, ki bo pošiljal POST zahtevo na strežnik, da doda novega študenta, kot je prikazano v lekciji.

Nato spodaj vnesite spremembe za studentsSlice: popolnoma odstranite reducer studentAdded v lastnosti reducers. V polje extraReducers pa dodajte dodatni reducer, ki bo dodajal novega študenta v slice students iz payload akcije v primeru uspešne zahteve, kot je prikazano v lekciji.