Datu sūtīšana, izmantojot thunk Redux

Iepriekšējā nodarbībā mēs apskatījām POST pieprasījuma apstrādi mūsu viltus serverī. Tagad uzrakstīsim thunk-funkciju, kas sūtīs pieprasījumu uz serveri.

Atvērsim mūsu lietotni ar produktiem, un tajā failu productsSlice.js. Tagad pēc thunk fetchProducts mēs ar createAsyncThunk palīdzību izveidosim thunk addProduct:

export const addProduct = createAsyncThunk()

Kā pirmo parametru mēs padodam createAsyncThunk 'products/addProduct', bet kā otro - asinhronu atgriezenisko izsaukumu, kas pieņems objektu ar jaunā produkta datiem:

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

Šī atgriezeniskā izsaukuma kodā mēs izsauksim klientu, padodot tam parametrus - ceļu un objektu ar produktu, un pēc tam atgriezīsim atbildes datus:

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

Tagad zemāk kodā apskatīsim lauku reducers priekš productsSlice. Iepriekš mēs pievienojām jaunu produktu, izmantojot reduceri productAdded, kurā mums bija metodes reducer un prepare. Tagad mēs ģenerējam nepieciešamos datus serverī un strādājam ar thunk, tāpēc noņemsim šeit pilnībā reduceri productAdded no koda. Un pēc tam ievietosim metodē extraReducers (tā koda beigās) vēl vienu papildu reduceri, kas veiksmīga pieprasījuma gadījumā pievienos slīceņā products jaunu produktu tieši no payload action (atceramies, ka šāds kods ir iespējams tikai pateicoties unikālajam createSlice):

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

Jā, starp citu, neaizmirstiet noņemt nanoid no importa rindām, un productAdded no eksporta action faila beigās.

Atveriet savu lietotni ar studentiem. Atveriet tajā failu studentsSlice.js. Ar createAsyncThunk palīdzību izveidojiet vēl vienu thunk addStudent, kas sūtīs POST pieprasījumu uz serveri, lai pievienotu jaunu studentu, kā parādīts nodarbībā.

Tālāk zemāk veiciet izmaiņas priekš studentsSlice: noņemiet pilnībā reduceri studentAdded īpašumā reducers. Bet laukā extraReducers pievienojiet papildu reduceri, kas pievienos jaunu studentu slīceņā students no payload action veiksmīga pieprasījuma gadījumā, kā parādīts nodarbībā.