Viungo vya Ziada vya Reducers katika Redux

Wacha tufungue programu yetu ya bidhaa, na ndani yake faili productsSlice.js. Labda umeona, kwamba tuliumba thunk fetchProducts kama kitendo tofauti? Tulifanya hivyo kwa sababu createSlice haitumii ufafanuzi wa thunks. Basi katika hali hii tunawezaje kufanya reducer wa kipande products kukabiliana na vitendo, ambavyo vimefafanuliwa nje ya products? Hivi ndivyo tunavyohitaji kushughulikia vitendo, ambavyo hutumwa na thunk fetchProducts.

Kwa hali kama hizi, createSlice ina sifa extraReducers, ambayo inaruhusu kuongeza viungo vya ziada vya reducers, ambavyo kwa upande wao zitashughulikia vitendo, vilivyofafanuliwa si katika kipande hiki.

Basi sasa katika mwili wa kitendo createSlice baada ya sifa reducers pamoja na viungo vyote vya reducers tuongeze njia nyingine extraReducers:

extraReducers() {},

Njia hii tunapaswa kupitisha kitu builder, ambacho kina njia, kwa msaada ambao unaweza kuongeza viungo vya ziada vya reducers:

extraReducers(builder) {},

Tutatumia moja ya njia za builder - addCase, ambayo inakubali kigezo cha kwanza muumba kitendo, na cha pili reducer. Moja ya vitendo, ambavyo vitatutumwa na fetchProducts wakati wa ombi ni fetchProducts.pending, ambayo inatuambia kwamba ombi limetumwa. Hebu katika hali hii tubadilishe hali kuwa 'in progress' (kabla ya hii ilikuwa 'idle'):

extraReducers(builder) {
	builder.addCase(fetchProducts.pending, (state) => {
		state.status = 'in progress'
	})
},

Sasa tushughulikie kitendo, ambacho kitatuma kwa kesi ya ombi lililofanikiwa. Hapa tutakuwa tukibadilisha sio tu hali katika hali ya 'success', lakini pia tutachukua bidhaa katika kipande products kutoka payload ya kitendo. Ili kukusanya bidhaa zote tutahitaji njia concat:

extraReducers(builder) {
	builder
		.addCase(fetchProducts.pending, (state) => {
			state.status = 'in progress'
		})
		.addCase(fetchProducts.fulfilled, (state, action) => {
			state.status = 'success'
			state.products = state.products.concat(action.payload)
		})
},

Katika kesi ya ombi lililoshindwa tutabadilisha hali kuwa 'fail' na kuandika katika hali ya ujumbe wa kosa:

.addCase(fetchProducts.rejected, (state, action) => {
	state.status = 'fail'
	state.error = action.error.message
})

Kama sasa tutaanzisha programu yetu na kwenye menyu kubofya 'Products', basi baada ya sekunde chache (kumbuka kuhusu kuchelewesha, ambayo tuliweka kwenye seva?) tutaona orodha ya bidhaa.

Vilevile tutaona mabadiliko na kwenye Redux DevTools. Sasa bidhaa zetu zitaonekana na katika hali ya (angalia kichupo 'State'), kama umebofya kwenye kitendo products/fetchProducts/fulfilled. Hapo pia itaonekana na hali mpya 'success'. Bofya sasa kwenye kitendo products/fetchProducts/pending na uangalie, nini sasa kimetofautisha kichupo 'State'.

Wakati mmoja tu usiopendeza, ambao unaweza kutokea kwako (niliyasema kuhusu hili somo lililopita) - hii ni kurudiarudia ombi la data. Kwa matokeo, kwetu kwenye orodha hautakuwa na 8, lakini zima 16 bidhaa na maonyo muhimu kwenye koni ya msanidi programu. Hebu tutafakari kuhusu hili kwenye somo lijalo.

Fungua programu yako ya wanafunzi. Fungua ndani yake faili studentsSlice.js. Katika mwili wa kitendo createSlice baada ya sifa reducers ongeza sifa extraReducers. Pitisha kwa njia extraReducers builder.

Kwa msaada wa njia builder.addCase ongeza usindikaji kwa vitendo pending, fulfilled na rejected, ambavyo hutuma fetchStudents wakati wa ombi la data, kama inavyoonyeshwa kwenye somo.