Испраќање на податоци со помош на 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 од експортот на акциите на крајот од датотеката.

Отворете ја вашата апликација со студенти. Отворете ја во неа датотеката studentsSlice.js. Со помош на createAsyncThunk создадете уште еден thunk addStudent, кој ќе испраќа POST-барање до серверот, за да додадете нов студент, како што е прикажано на часот.

Потоа подолу внесете ги промените за studentsSlice: отстранете го целосно редјусерот studentAdded во својството reducers. А во полето extraReducers додадете дополнителен редјусер, кој ќе додава нов студент во слајсот students од payload на акцијата во случај на успешно барање, како што е прикажано на часот.