Redux-da Goşmaça Redýuserler

Geliň, önümçilik programmamyzy açalyň, onyň içindäki productsSlice.js faýlyna serediň. Belki size fetchProducts thunkyny aýratyn funksiýa hökmünde döredendigimiz üns beriňiz? Biz muny şeýle etdik, sebäbi createSlice thunklaryň kesgitlenişini goldamaýar. Bu ýagdaýda biz products slýasynyň reducerini, slýasyň çäginden kesgitlenen ekşenlere nädip jogap bermeklige mejbur etmelimiz? Häzirki wagtda biz aýratyn fetchProducts thunky tarapyndan iberilýän ekşenleri işlemeli dälmi?

Munuň ýaly ýagdaýlar üçin createSlice-da extraReducers häsiýeti bar, bu bolsa goşmaça redýuserleri goşmaga mümkinçilik berýär, olar öz gezeginde bu slýasyň däl, başga ýerde kesgitlenen ekşenleri işleýärler.

Indi createSlice funksiýasynyň gövdesinde reducers häsiýetinden soň, ähli redýuserler bilen ýene bir metot goşalyň extraReducers:

extraReducers() {},

Bu metoda biz builder obýektini geçirmeli, onuň kömekçi metotlary bar, olaryň üsti bilen goşmaça redýuserleri goşup bolýar:

extraReducers(builder) {},

Biz builder-yň metotlarynyň birini ulanarys - addCase, bu birinji parametr hökmünde ekşen döredijisini kabul edýär, ikinjide bolsa reduceri. Bizä fetchProducts tarapyndan iberiljek ekşenleriň biri fetchProducts.pending bolup, bu bize soragyň iberilendigini aýdýar. Geliň bu ýagdaýda statusy 'in progress' üýtgedeliň (öňünden 'idle' boldy):

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

Indi soragyň üstünlikli ýerine ýetirilmegi netijesinde iberiljek ekşeni işleýäris. Bu ýerde biz ýörite statusy däl, eýsem products slýasyna payload ekşeninden önümleri alarys. Ähli önümleri ýygnamak üçin bizä concat metody zerur bolar:

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)
		})
},

Soragyň şowsuz ýerine ýetirilmegi ýagdaýynda biz statusy 'fail' üýtgederis we stýata ýalňyşlyk barada habary ýazarys:

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

Häzir biz programmamyzy işledip we menýudan 'Products' üstüne klik etsek, birnäçe sekuntdan soň (serwerde goýan gijikmäni ýatda saklaň?) önümleriň sanawy görüner.

Şeýle hem Redux DevTools-da üýtgeşmeleri göreris. Indi önümlerimiz stýata-da görüner ('State' diňesine serediň), eger products/fetchProducts/fulfilled ekşenine klik etseňiz. Şol ýerde hem 'success' täze statusy peýda bolar. Indi products/fetchProducts/pending ekşenine klik ediň we serediň, 'State' diňesi indi näme bilen tapawutlanýar.

Bolup biljek ýeke-täk ýakymsyz tarapy, size bolup biljek (bu barada öňki sapakda aýtdym) - bu maglumatlaryň soraglanyp gaýtalanmagy. Netijede, bizde sanawda 8 däl, eýsem jemi 16 önüm we developer konsolunda kritiki duýduryşlar. Geliň indiki sapakda muny çözeliň.

Talyp programmanyňyzy açyň. Onyň içindäki studentsSlice.js faýlyna serediň. createSlice funksiýasynyň gövdesinde reducers häsiýetinden soň extraReducers häsiýetini goşuň. extraReducers metoduna builder geçiriň.

builder.addCase metodynyň kömegi bilen pending, fulfilled we rejected ekşenleri üçin işleýiş goşuň, olar fetchStudents tarapyndan maglumat soraglanylanda iberilýär, sapakda görkezilişi ýaly.