Adatok küldése thunk használatával a Redux-ban

Az előző órán foglalkoztunk a POST kérés feldolgozásával a hamis szerverünkön. Most írjunk egy thunk függvényt, amely küldi a kérést a szervernek.

Nyissuk meg a termék alkalmazásunkat, és benne a productsSlice.js fájlt. Most a fetchProducts thunk után a createAsyncThunk segítségével hozzunk létre egy addProduct thunk-ot:

export const addProduct = createAsyncThunk()

Az első paraméterként a createAsyncThunk-ba átadjuk a 'products/addProduct'-ot, a második pedig egy aszinkron callback lesz, amely átveszi az új termék adatait tartalmazó objektumot:

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

Ennek a kolbéknak a kódjában meghívjuk a klienset, átadva neki az útvonalat és a terméket tartalmazó objektumot paraméterként, majd visszaadjuk a válasz adatait:

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

Most lentebb a kódban nézzük a reducers mezőt a productsSlice-hoz. Korábban a productAdded reducer segítségével adtunk hozzá új terméket, amelyben voltak reducer és prepare metódusaink. Most mi generáljuk a szükséges adatokat a szerveren és thunk-kal dolgozunk, ezért innen teljesen eltávolítjuk a productAdded reducert a kódból. Majd bevisszük a extraReducers metódusba (a kódja végére) még egy kiegészítő reducert, amely sikeres kérés esetén hozzáadja a slice-hoz az új terméket közvetlenül az akció payload-jából (emlékezzünk, hogy egy ilyen kód csak a egyedülálló createSlicenak köszönhetően lehetséges):

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

Igen, egyébként, ne felejtsétek el a nanoid eltávolítását az import sorokból, és a productAdded-t az exportból az eksztenek végén a fájl végén.

Nyissátok meg a diák alkalmazásotokat. Nyissátok meg benne a studentsSlice.js fájlt. A createAsyncThunk segítségével hozzatok létre még egy thunk-ot addStudent, amely küld egy POST kérést a szervernek, hogy hozzáadjon egy új diákot, ahogyan az az órán bemutatásra került.

Ezután lentebb végezzétek el a módosításokat a studentsSlice-hoz: távolítsátok el teljesen a studentAdded reducert a reducers tulajdonságból. A extraReducers mezőbe pedig adjatok hozzá egy kiegészítő reducert, amely hozzáadja az új diákot a students slice-hoz az akció payload-jából sikeres kérés esetén, ahogyan az az órán bemutatásra került.