Адпраўка даных з дапамогай 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) => {}
)

У кодзе гэтага колбэка мы выклічам кліента, перадаўшы яму параметрамі шлях і аб'ект з прадуктам, а затым вернем даныя адказу:

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 з экспарту экшэнаў у канцы файла.

Адчынiце ваша прыкладанне са студэнтамі. Адчынiце ў ім файл studentsSlice.js. Пры дапамозе createAsyncThunk стварыце яшчэ адзін thunk addStudent, які будзе адпраўляць POST-запыт на сервер, каб дадаць новага студэнта, як паказана ў уроку.

Затым ніжэй унясіце змены для studentsSlice: збярыце цалкам рэдьюсер studentAdded у ўласцівасці reducers. А ў поле extraReducers дадайце дадатковы рэдьюсер, які будзе дадаваць новага студэнта ў слайс students з payload экшэна ў выпадку паспяховага запыту, як паказана ўроку.