Gegevens verzenden met behulp van thunk in Redux

In de vorige les hebben we de verwerking van een POST-verzoek op onze nep-server behandeld. Laten we nu een thunk-functie schrijven die het verzoek naar de server zal sturen.

Laten we onze applicatie met producten openen, en daarin het bestand productsSlice.js. Nu zullen we na de thunk fetchProducts met behulp van createAsyncThunk een thunk addProduct aanmaken:

export const addProduct = createAsyncThunk()

Als eerste parameter geven we aan createAsyncThunk 'products/addProduct' door, en als tweede een asynchrone callback, die een object met gegevens van het nieuwe product zal ontvangen:

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

In de code van deze callback roepen we de client aan, waaraan we het pad en het object met het product als parameters doorgeven, en vervolgens retourneren we de antwoordgegevens:

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

Laten we nu lager in de code kijken naar het veld reducers voor productsSlice. Eerder voegden we een nieuw product toe met behulp van de reducer productAdded, waarin we methodes reducer en prepare hadden. Nu genereren we de benodigde gegevens op de server en werken we met een thunk, dus we verwijderen hier volledig de reducer productAdded uit de code. En vervolgens voegen we in de methode extraReducers (aan het einde van de code) nog een extra reducer toe, die in het geval van een succesvol verzoek het nieuwe product rechtstreeks uit de payload van de action aan de slice products zal toevoegen (onthoud dat dergelijke code mogelijk is alleen dankzij de unieke createSlice):

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

Ja, trouwens, vergeet niet nanoid te verwijderen uit de importregels, en productAdded uit de export van actions aan het einde van het bestand.

Open je applicatie met studenten. Open daarin het bestand studentsSlice.js. Maak met behulp van createAsyncThunk nog een thunk addStudent aan, die een POST-verzoek naar de server zal sturen om een nieuwe student toe te voegen, zoals getoond in de les.

Voer vervolgens lager wijzigingen door voor studentsSlice: verwijder volledig de reducer studentAdded in de eigenschap reducers. En voeg in het veld extraReducers een extra reducer toe, die een nieuwe student aan de slice students zal toevoegen uit de payload van de action in het geval van een succesvol verzoek, zoals getoond in de les.