Duomenų siuntimas naudojant thunk Redux

Ankstesnėje pamokoje mes išnagrinėjome POST užklausos apdorojimą mūsų netikrame serveryje. Dabar parašykime thunk funkciją, kuri siųs užklausą į serverį.

Atidarykime mūsų programą su produktais, o joje failą productsSlice.js. Dabar po thunk fetchProducts mes naudodami createAsyncThunk sukursime thunk addProduct:

export const addProduct = createAsyncThunk()

Pirmuoju parametru mes perduosime į createAsyncThunk 'products/addProduct', o antruoju asinchroninį callback, kuris priims objektą su naujo produkto duomenimis:

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

Šio callback kode mes iškviensime klientą, perduodami jam parametrais kelią ir objektą su produktu, o tada grąžinsime atsako duomenis:

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

Dabar žemiau kode pažiūrėkime į lauką reducers productsSlice. Anksčiau mes pridėdavome naują produktą naudodami reducerį productAdded, kuriame mes turėjome metodus reducer ir prepare. Dabar mes generuojame reikiamus duomenis serveryje ir dirbame su thunk, todėl pašalinsime čia visiškai reducerį productAdded iš kodo. Ir tada įtrauksime į metodą extraReducers (į jo kodo pabaigą) dar vieną papildomą reducerį, kuris sėkmės atveju pridės į slice'ą products naują produktą tiesiogiai iš payload action (prisimename, kad toks kodas įmanomas tik dėl nepakartojamo createSlice):

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

Taip, beje, nepamirškite pašalinti nanoid iš importų eilučių, o productAdded iš eksportuojamų action failo pabaigoje.

Atidarykite savo programą su studentais. Atidarykite jame failą studentsSlice.js. Naudodamiesi createAsyncThunk sukurkite dar vieną thunk addStudent, kuris siųs POST užklausą į serverį, kad pridėtų naują studentą, kaip parodyta pamokoje.

Toliau žemiau atlikite pakeitimus studentsSlice: visiškai pašalinkite reducerį studentAdded savybėje reducers. O lauke extraReducers pridėkite papildomą reducerį, kuris pridės naują studentą į slice'ą students iš payload action sėkmingos užklausos atveju, kaip parodyta pamokoje.