Andmete saatmine thunk'iga Reduxis

Eelmisel tunnil tegelesime POST-päringu töötlemisega meie pseudoserveris. Nüüd kirjutame thunk-funktsiooni, mis saadab päringu serverisse.

Avame oma rakenduse toodetega, ja selles faili productsSlice.js. Nüüd peale thunk'i fetchProducts loome createAsyncThunk abil thunk'i addProduct:

export const addProduct = createAsyncThunk()

Esimeseks parameetriks anname createAsyncThunk'ile 'products/addProduct', ja teiseks asünkroonse callback'i, mis võtab vastu objekti uue toote andmetega:

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

Selle callback'i koodis kutsume kliendi välja, andes talle parameetritena tee ja objekti tootega, ning siis tagastame vastuse andmed:

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

Nüüd vaatame allpool koodis välja reducers productsSlice'i jaoks. Varem lisasime uue toote kasutades reducer'it productAdded, kus meil olid meetodid reducer ja prepare. Nüüd genereerime vajalikud andmed serveris ja töötame thunk'iga, seega eemaldame siit täielikult reducer'i productAdded koodist. Ja siis lisame meetodisse extraReducers (selle koodi lõppu) veel ühe lisa reducer'i, mis juhul eduka päringu puhul lisab slicesse products uue toote otse payload'ist action'ist (mäletame, et selline kood on võimalik ainult tänu ainulaadsele createSlice'ile):

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

Jah, muide, ärge unustage eemaldada nanoid importide ridadelt, ja productAdded export'itavate action'ite loetelust faili lõpus.

Avage oma rakendus üliõpilastega. Avage selles fail studentsSlice.js. createAsyncThunk abil looge veel üks thunk addStudent, mis saadab POST-päringu serverisse, et lisada uus üliõpilane, nagu näidatud tunnis.

Järgmisena allpool tehke muudatused studentsSlice jaoks: eemaldage täielikult reducer studentAdded atribuudis reducers. Ja väljale extraReducers lisage lisa reducer, mis lisab uue üliõpilase slicesse students payload'ist action'ist juhul eduka päringu, nagu näidatud tunnis.