Utangulizi wa Thunks katika Redux

Katika sura iliyopita tuliandaa utendakazi wa serveri, hifadhidata na mteja wa kubadilishana data. Sasa tunahitaji kuweka daraja la mwisho ambalo litasaidia programu yetu ya Redux 'iliyopangwa kwa synchronic' kuingiliana na mteja wa asynchronous, ambalo tuliunda kwenye somo la mwisho la sura iliyopita, ili kutuma maombi na kupata data inayohitajika kwenye jibu.

Kama tunavyokumbuka kutoka kwa masomo ya kwanza ya sehemu iliyopita, Redux haijui chochote kuhusu kufanya kazi na mantiki ya asynchronous na kwa hili tutatumia thunk middleware. Middleware hii inaturuhusu kufanya kazi na actions zilizotumwa, kutumia katika msimbo wetu wa thunk dispatch na getState mbinu za duka, na pia kusaidia dispatch mbinu kufanya kazi sio tu na vitu vya kawaida vya JS, lakini pia na huluki kama vile vitendakazi na ahadi.

Kawaida kitendakazi cha thunk huitwa na hoja mbili dispatch na getState (ikiwa inahitajika), ambazo zinaweza kutumika katika mwili wa kitendakazi hicho. Kwa kutumia hii inaweza kutuma actions za kawaida. Pia inaweza kutumwa kupitia store.dispatch. Mfano wa kitendakazi kama hicho umewasilishwa hapa chini:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Old Color: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`New Color: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Wacha sasa tufungue programu yetu ya bidhaa. Jambo la kwanza ambalo tunapaswa kupata kutoka kwa serveri wakati programu inapozindua - hii ni orodha ya bidhaa. Kwa kuwa kawaida thunks huandikwa kwenye faili za sehemu (slice), basi tutafungua faili productsSlice.js.

Habari njema ni kwamba hatuitaji kuchanganyikiwa na kusanidi Redux Thunk, kwa sababu kitendakazi configureStore kutoka RTK tayari kitafanya hivyo kwa ajili yetu. Kwa hivyo tuongeze createAsyncThunk kwenye usafirishaji kwenye faili:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

Pia tuongeze kwenye usafirishaji mteja wetu:

import { client } from '../../api/client'

Na sasa kwa msaada wa createAsyncThunk tuunde thunk yetu ya kwanza ya kupata bidhaa, tufanye hii mara baada ya tangazaji la kitu initialState:

export const fetchProducts = createAsyncThunk()

Kigezo cha kwanza cha createAsyncThunk kitakuwa kinakubali kamba kwa aina ya action inayotokana, na cha pili - kitendakazi cha kolbak kwa ajili ya payload, ambacho mwishowe kitarudisha iwe data, au ahadi na hitilafu (tazama faili client.js). Katika msimbo wa kitendakazi sisi tunaita client.get na tukapeana njia, ambayo tuliainisha kwenye serveri (angalia vigezo vinavyokubaliwa http.get kwenye server.js):

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

Fungua programu yako ya wanafunzi. Fungua ndani yake faili studentsSlice.js. Wasilishe ndani yake kitendakazi createAsyncThunk kwa ajili ya kuunda thunk, na pia client kwa kutuma maombi ya API kwenye serveri.

Mara baada ya tangazaji la kitu initialState kwa kutumia createAsyncThunk unda thunk fetchStudents ya kupata orodha ya wanafunzi, ambayo itatuma ombi la GET anwani /fakeServer/students, iliyoainishwa kwenye faili yako server.js, na kurudisha response.data, kama inavyoonyeshwa kwenye nyenzo za somo. Kama kigezo cha kwanza kwa createAsyncThunk bainisha kamba students/fetchStudents kwa aina ya action.