Data Stuur met behulp van thunk in Redux

In die vorige les het ons die verwerking van 'n POST-versoek op ons fopbediener behandel. Kom ons skryf nou 'n thunk-funksie wat die versoek na die bediener sal stuur.

Laat ons ons aansoek met produkte oopmaak, en in dit die lêer productsSlice.js. Nou na die thunk fetchProducts sal ons met behulp van createAsyncThunk 'n thunk skep addProduct:

export const addProduct = createAsyncThunk()

As eerste parameter sal ons in createAsyncThunk 'products/addProduct' oordra, en as tweede 'n asynchrone callback, wat die objek met data van die nuwe produk sal aanvaar:

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

In die kode van hierdie callback sal ons die kliënt oproep, deur die pad en die objek met die produk as parameters daaraan oor te dra, en dan die data van die antwoord terug te gee:

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

Laat ons nou hieronder in die kode na die veld reducers kyk vir productsSlice. Vroeër het ons 'n nuwe produk bygevoeg met behulp van die reducer productAdded, waarin ons metodes gehad het reducer en prepare. Nou genereer ons die benodigde data op die bediener en werk met thunk, so laat ons hierdie reducer productAdded volledig uit die kode verwyder. En dan voeg ons by die extraReducers metode (aan die einde van die kode daarvan) nog 'n addisionele reducer in, wat in die geval van 'n suksesvolle versoek, die nuwe produk in die slice products sal byvoeg direk uit die payload van die aksie (onthou, so 'n kode is moontlik slegs te danke aan die unieke createSlice):

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

Ja, terloops, moenie vergeet om nanoid uit te verwyder van die invoerlyne nie, en productAdded uit die uitvoer van aksies aan die einde van die lêer.

Maak jou aansoek met studente oop. Maak die lêer studentsSlice.js daarin oop. Met behulp van createAsyncThunk skep nog 'n thunk addStudent, wat 'n POST-versoek na die bediener sal stuur om 'n nuwe student by te voeg, soos in die les gewys.

Verder hieronder, maak veranderings vir studentsSlice: verwyder die reducer studentAdded heeltemal in die eienskap reducers. En by die veld extraReducers voeg 'n addisionele reducer by, wat 'n nuwe student by die slice students sal byvoeg uit die payload van die aksie in die geval van 'n suksesvolle versoek, soos in die les gewys.