Слање података помоћу thunk у Redux-у

На прошлом часу смо размотрили обраду POST захтева на нашем лажном серверу. Хајде сада да напишемо thunk функцију која ће слати захтев серверу.

Отворимо нашу апликацију са производима, а у њој фајл productsSlice.js. Сада после thunk-a 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 екшена у случају успешног захтева, као што је приказано на часу.