Odosielanie dát pomocou thunk v Reduxe

Na minulej hodine sme preberali spracovanie POST požiadavky na našom falošnom serveri. Poďme teraz napísať thunk funkciu, ktorá bude odosielať požiadavku na server.

Otvorme našu aplikáciu s produktmi a v nej súbor productsSlice.js. Teraz po thunk fetchProducts pomocou createAsyncThunk vytvoríme thunk addProduct:

export const addProduct = createAsyncThunk()

Prvým parametrom odovzdáme do createAsyncThunk 'products/addProduct' a druhým asynchrónny callback, ktorý bude prijímať objekt s údajmi nového produktu:

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

V kóde tohto callbacku zavoláme klienta, odovzdáme mu parametre cestu a objekt s produktom a potom vrátime údaje odpovede:

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

Teraz nižšie v kóde sa pozrieme na pole reducers pre productsSlice. Predtým sme pridávali nový produkt pomocou redukora productAdded, v ktorom sme mali metódy reducer a prepare. Teraz generujeme potrebné údaje na serveri a pracujeme s thunk, preto tu úplne odstránime reduktor productAdded z kódu. Potom pridáme do metódy extraReducers (na koniec jej kódu) ešte jeden dodatočný reduktor, ktorý v prípade úspešnej požiadavky pridá do slice products nový produkt priamo z payload akcie (pamätáme, že takýto kód je možný len vďaka jedinečnému createSlice):

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

Áno, mimochodom, nezabudnite odstrániť nanoid z riadkov s importom a productAdded z exportu akcií na konci súboru.

Otvorte vašu aplikáciu so študentmi. Otvorte v nej súbor studentsSlice.js. Pomocou createAsyncThunk vytvorte ešte jeden thunk addStudent, ktorý bude odosielať POST požiadavku na server, aby pridal nového študenta, ako je ukázané v lekcii.

Ďalej nižšie vykonajte zmeny pre studentsSlice: úplne odstráňte reduktor studentAdded vo vlastnosti reducers. A do poľa extraReducers pridajte dodatočný reduktor, ktorý bude pridávať nového študenta do slice students z payload akcie v prípade úspešnej požiadavky, ako je ukázané v lekcii.