Додаҳоҳоро бо истифода аз thunk дар Redux фиристодан

Дар дарси гузашта мо бо коркарди дархости POST дар сервери муваққатии худ шинос шудем. Биёед ҳоло функсияи thunk-ро нависед, ки дархост ба сервер мефиристад.

Барномаи мо бо маҳсулотро кушед, ва дар он файли productsSlice.js. Ҳоло пас аз thunk-и fetchProducts мо бо ёрии createAsyncThunk thunk-и addProduct-ро эҷод мекунем:

export const addProduct = createAsyncThunk()

Якумин параметрро мо ба createAsyncThunk 'products/addProduct' мефиристем, ва дуюмро callback-и асинхронӣ, ки объект бо додаҳои маҳсулоти навро қабул мекунад:

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

Дар коди ин callback мо клиентро даъват мекунем, ба он роҳ ва объекти бо маҳсулотро параметрҳо мефиристем, ва сипас додаҳои ҷавобро бармегардонем:

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

Ҳоло дар поёни код ба майдони reducers барои productsSlice нигарем. Пештар мо маҳсулоти навро бо ёрии редюсери productAdded илова мекардем, ки дар он усулҳои reducer ва prepare доштем. Ҳоло мо додаҳои заруриро дар сервер ҳосил мекунем ва бо thunk кор мекунем, аз ин рӯ дар ин ҷо комилан редюсери productAdded-ро аз код тоза мекунем. Ва сипас ба дар усули extraReducers (дар охири коди он) якум дигар редюсери иловагӣ мегузорем, ки дар сурати дархости муваффақона дар слайси products маҳсулоти навро рост аз payload экшн илова мекунад (дар хотир доред, ки ин код имконпазир аст танҳо ба сабаби createSlice-и беназир):

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

Бале, ҳамин тавр, фаромӯш накунед, ки nanoid-ро аз сатрҳои воридот тоза кунед, ва productAdded аз содироти экшенҳо дар охири файл.

Барномаи худро бо донишҷӯён кушед. Дар он файли studentsSlice.js-ро кушед. Бо ёрии createAsyncThunk thunk-и дигарро addStudent эҷод кунед, ки дархости POST-ро ба сервер мефиристад, то донишҷӯи навро илова кунад, ҳамон тавре ки дар дарс нишон дода шуд.

Баъдтар дар поён тағиротҳоро барои studentsSlice ворид кунед: редюсери studentAdded-ро комилан дар хосияти reducers тоза кунед. Ва дар майдони extraReducers редюсери иловагиеро илова кунед, ки донишҷӯи навро ба слайси students аз payload экшн дар сурати дархости муваффақона илова мекунад, ҳамон тавре ки дар дарс нишон дода шуд.