Tietojen lähettäminen thunkin avulla Reduxissa

Edellisellä tunnilla käsittelimme POST-pyynnän käsittelyä meidän feikkipalvelimellamme. Nyt kirjoitamme thunk-funktion, joka lähettää pyynnön palvelimelle.

Avataan sovelluksemme tuotteiden kanssa, ja siinä tiedosto productsSlice.js. Nyt thunk fetchProducts jälkeen luomme createAsyncThunk:n avulla thunkin addProduct:

export const addProduct = createAsyncThunk()

Ensimmäisenä parametrina välitämme createAsyncThunk:iin 'products/addProduct', ja toisena asynkronisen callbackin, joka ottaa vastaan objektin uuden tuotteen tiedoilla:

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

Tämän callbackin koodissa kutsumme clienttiä, antaen sille parametreina polun ja objektin tuotteen kanssa, ja palautamme sitten vastauksen tiedot:

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

Nyt katsotaan alempana koodissa kenttään reducers kohteelle productsSlice. Aiemmin lisäsimme uuden tuotteen käyttämällä reduceria productAdded, jossa meillä oli metodit reducer ja prepare. Nyt generoimme tarvittavat tiedot palvelimella ja työskentelemme thunkin kanssa, joten poistamme täältä kokonaan reducerin productAdded koodista. Ja sitten lisäämme metodiin extraReducers (sen koodin loppuun) vielä yhden lisäreducerin, joka onnistuneen pyynnön tapauksessa lisää sliceen products uuden tuotteen suoraan payload:sta actionista (muista, että tällainen koodi on mahdollista vain createSlice:n ansiosta):

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

Kyllä, muuten, älä unohda poistaa nanoidia import-riveiltä, ja productAdded exportista actioneiden joukosta tiedoston lopussa.

Avaa opiskelijasovelluksesi. Avaa siinä tiedosto studentsSlice.js. createAsyncThunk:n avulla luo toinen thunk addStudent, joka lähettää POST-pyynnön palvelimelle lisätäkseen uuden opiskelijan, kuten oppitunnilla näytetään.

Seuraavaksi tee alempana muutoksia kohteelle studentsSlice: poista kokonaan reducer studentAdded propertystä reducers. Ja kenttään extraReducers lisää lisä reducer, joka lisää uuden opiskelijan sliceen students payload:sta actionista onnistuneen pyynnön tapauksessa, kuten oppitunnilla näytetään.