Sending av data med thunk i Redux

I forrige leksjon gikk vi gjennom behandlingen av en POST-forespørsel til vår falske server. La oss nå skrive en thunk-funksjon som vil sende en forespørsel til serveren.

La oss åpne applikasjonen vår med produkter, og i den filen productsSlice.js. Nå, etter thunk fetchProducts, skal vi ved hjelp av createAsyncThunk opprette en thunk addProduct:

export const addProduct = createAsyncThunk()

Som første parameter vil vi sende til createAsyncThunk 'products/addProduct', og som andre en asynkron callback, som vil ta imot et objekt med data for det nye produktet:

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

I koden til denne callbacken vil vi kalle klienten, sende den banen og objektet med produktet som parametere, og deretter returnere svardataene:

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

La oss nå se nedenfor i koden på feltet reducers for productsSlice. Tidligere la vi til et nytt produkt ved hjelp av reduceren productAdded, der vi hadde metodene reducer og prepare. Nå genererer vi nødvendige data på serveren og jobber med thunk, så vi vil fullstendig fjerne reduceren productAdded fra koden her. Deretter legger vi til i metoden extraReducers (på slutten av koden) en ny ekstra reducer, som i tilfelle en vellykket forespørsel vil legge til i slicen products et nytt produkt direkte fra payload av actionen (husk at slik kode er mulig kun takket være den enestående createSlice):

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

Ja, forresten, ikke glem å fjerne nanoid fra import-setningene, og productAdded fra eksporten av actions på slutten av filen.

Åpne applikasjonen din med studenter. Åpne filen studentsSlice.js i den. Ved hjelp av createAsyncThunk, opprett en ny thunk addStudent, som vil sende en POST-forespørsel til serveren for å legge til en ny student, som vist i leksjonen.

Deretter, gjør endringer nedenfor for studentsSlice: fjern fullstendig reduceren studentAdded i egenskapen reducers. Og i feltet extraReducers, legg til en ekstra reducer, som vil legge til en ny student i slicen students fra payload av actionen i tilfelle en vellykket forespørsel, som vist i leksjonen.