Sending data using thunk in Redux

I den sidste lektion dækkede vi håndteringen af en POST-forespørgsel til vores falske server. Lad os nu skrive en thunk-funktion, som vil sende forespørgslen til serveren.

Lad os åbne vores produktapplikation, og i den filen productsSlice.js. Nu efter thunken fetchProducts vil vi ved hjælp af createAsyncThunk oprette en thunk addProduct:

export const addProduct = createAsyncThunk()

Som den første parameter vil vi sende til createAsyncThunk 'products/addProduct', og som den anden en asynkron callback, som vil modtage et objekt med data for det nye produkt:

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

I koden for denne callback vil vi kalde klienten, passe den stien og objektet med produktet som parametre, og derefter returnere svardataene:

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

Lad os nu længere nede i koden kigge på feltet reducers for productsSlice. Tidligere tilføjede vi et nyt produkt ved hjælp af reduceren productAdded, hvor vi havde metoderne reducer og prepare. Nu genererer vi de nødvendige data på serveren og arbejder med thunk, så vi vil helt fjerne reduceren productAdded fra koden her. Og derefter tilføje i metoden extraReducers (i slutningen af dens kode) endnu en ekstra reducer, som i tilfælde af en succesfuld forespørgsel vil tilføje til slicen products det nye produkt direkte fra payload af actionen (husk, at sådan kode kun er mulig takket være den unikke createSlice):

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

Ja, forresten, glem ikke at fjerne nanoid fra importlinjerne, og productAdded fra eksporten af actions i slutningen af filen.

Åbn din applikation med studerende. Åbn filen studentsSlice.js i den. Ved hjælp af createAsyncThunk, opret endnu en thunk addStudent, som vil sende en POST-forespørgsel til serveren for at tilføje en ny studerende, som vist i lektionen.

Herefter længere nede, foretag ændringer for studentsSlice: fjern helt reduceren studentAdded i egenskaben reducers. Og i feltet extraReducers tilføj en ekstra reducer, som vil tilføje den nye studerende til slicen students fra payload af actionen i tilfælde af en succesfuld forespørgsel, som vist i lektionen.