Skicka data med hjälp av thunk i Redux

I föregående lektion gick vi igenom hanteringen av en POST-förfrågan på vår falska server. Låt oss nu skriva en thunk-funktion som kommer att skicka förfrågan till servern.

Vi öppnar vår produktapplikation, och i den filen productsSlice.js. Nu efter thunk fetchProducts skapar vi en thunk addProduct med hjälp av createAsyncThunk:

export const addProduct = createAsyncThunk()

Som första parameter skickar vi in 'products/addProduct' i createAsyncThunk, och som andra parameter en asynkron callback-funktion som tar emot ett objekt med data för den nya produkten:

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

I koden för denna callback anropar vi klienten, skickar sökvägen och produktobjektet som parametrar, och returnerar sedan svarsdata:

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

Nu tittar vi längre ner i koden på fältet reducers för productsSlice. Tidigare lade vi till en ny produkt med hjälp av reducern productAdded, där vi hade metoderna reducer och prepare. Nu genererar vi nödvändig data på servern och arbetar med thunk, så vi tar helt bort reducern productAdded från koden här. Sedan lägger vi till i metoden extraReducers (i slutet av dess kod) ytterligare en extra reducer, som vid en lyckad förfrågan kommer att lägga till i slicen products den nya produkten direkt från payload i actionen (kom ihåg att sådan kod är möjlig tack vare den oförlikneliga createSlice):

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

Ja, förresten, glöm inte att ta bort nanoid från importraderna, och productAdded från exporten av actions i slutet av filen.

Öppna din studentapplikation. Öppna filen studentsSlice.js i den. Skapa med hjälp av createAsyncThunk ytterligare en thunk addStudent, som kommer att skicka en POST-förfrågan till servern för att lägga till en ny student, som visas i lektionen.

Gör sedan ändringar längre ner för studentsSlice: ta bort reducern studentAdded helt i egenskapen reducers. Och i fältet extraReducers lägg till en extra reducer, som kommer att lägga till den nya studenten i slicen students från payload i actionen vid en lyckad förfrågan, som visas i lektionen.