Kutuma Data Kwa Kutumia Thunk Katika Redux

Katika somo lililopita tulichambua usindikaji wa ombi la POST kwenye seva yetu bandia. Sasa tuandike kitendakazi cha thunk ambacho kitatumia ombi kwa seva.

Tufungue programu yetu ya bidhaa, na ndani yake faili productsSlice.js. Sasa baada ya thunk fetchProducts tutatumia createAsyncThunk kuunda thunk addProduct:

export const addProduct = createAsyncThunk()

Kigezo cha kwanza tutakiita kwenye createAsyncThunk 'products/addProduct', na cha pili kiitiko cha asinkroni, ambacho kitakubali kitu chenye data ya bidhaa mpya:

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

Katika msimbo wa kiitiko hiki tutaiita mteja, tukikipitishia kigezo njia na kitu chenye bidhaa, kisha turudishe data ya majibu:

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

Sasa chini kwenye msimbo tuangalie uga reducers kwa productsSlice. Hapo awali tulikuwa tunaongeza bidhaa mpya kwa kutumia reducer productAdded, ambamo tulikuwa na njia reducer na prepare. Sasa tunazalisha data inayohitajika kwenye seva na kufanya kazi na thunk, kwa hivyo tutaondoa hapa kabisa reducer productAdded kutoka kwenye msimbo. Kisha tuingize ndani ya Njia extraReducers (mwisho wa msimbo wake) reducer nyongeza zaidi, ambayo katika tukio la ombi lililofanikiwa litaongeza kwenye kipande products bidhaa mpya moja kwa moja kutoka payload ya kitendo (kumbuka, msimbo kama huu unawezekana sana kwa shukrani ya createSlice isiyo ya kawaida):

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

Ndio, kwa njia, usisahau kuondoa nanoid kutoka kwenye mistari ya uagizaji, na productAdded kutoka kwa uhamishaji wa vitendo mwishoni mwa faili.

Fungua programu yako ya wanafunzi. Fungua ndani yake faili studentsSlice.js. Kwa msaada wa createAsyncThunk unda thunk nyingine addStudent, ambayo itatumia ombi la POST kwa seva, ili kuongeza mwanafunzi mpya, kama inavyoonyeshwa kwenye somo.

Ifuatayo chini ingiza mabadiliko kwa studentsSlice: ondoa kabisa reducer studentAdded katika sifa reducers. Na kwenye uga extraReducers ongeza reducer nyongeza ambayo itaongeza mwanafunzi mpya kwenye kipande students kutoka payload ya kitendo katika tukio la ombi lililofanikiwa, kama inavyoonyeshwa kwenye somo.