Redux-da maglumat ibermek üçin thunk ulanylyşy

Öňki sapakda biz özümiziň ýasalan serverimizde POST soragyny işlemegi öwrendik. Indi serwere sorag iberýän thunk-funksiýany ýazalyň.

Önümler barada aplikasiýamyzy açalyň, we onuň içindäki productsSlice.js faýlyny açalyň. Indi fetchProducts thunk-yndan soň createAsyncThunk ýardamy bilen addProduct thunk-yňy döredeliň:

export const addProduct = createAsyncThunk()

createAsyncThunk-a birinji parametr hökmünde 'products/addProduct' bereliň, ikinji parametr hökmünde bolsa täze önümiň maglumatlar obýektini alýän asinkron callback:

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

Bu callback-iň kodunda klient çağyryp, ona ýol we önüm obýektini parametrler hökmünde bereliň, soňra jogap maglumatlaryny gaýtaryň:

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

Indi aşakdaky koda serediň, productsSlice üçin reducers meýdanyna. Öň biz productAdded reducer-i ýardamy bilen täze önüm goşýardyk, onuň içinde reducer we prepare metodlary bardy. Indi biz zerur maglumatlary serwerde döredýäris we thunk bilen işleýäris, şonuň üçin bu ýerden productAdded reducer-ini koddan doly aýyryň. Soňra extraReducers metoduna (onuň kodunyň soňuna) ýene bir goşmaça reducer goşuň, bu reducer üstünlikli sorag ýagdaýynda products slice-a täze önümi gönümel payload-dan (ýatda saklaň, bu kod diňe createSlice-iň aýratynlygy bilen mümkin):

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

Hawa, ýadyňyzdan çykarmaň, import setirlerinden nanoid-i aýyryň, faýlyň ahyryndaky eksport edilýän aksiýalar listinden bolsa productAdded-y aýyryň.

Talyp barada aplikasiýaňyzy açyň. Onyň içindäki studentsSlice.js faýlyny açyň. createAsyncThunk ýardamy bilen ýene bir addStudent thunk-y dörediň, bu thunk sapakda görkezilişi ýaly täze talyp goşmak üçin serwere POST soragyny iberer.

Indiki aşakda studentsSlice üçin üýtgeşmeler giriziň: reducers aýratynlygyndaky studentAdded reducer-ini doly aýyryň. extraReducers meýdanyna bolsa, sapakda görkezilişi ýaly üstünlikli sorag ýagdaýynda payload-dan täze talyby students slice-a goşýan goşmaça reducer-i goşuň.