Lisareduktorid Reduxis

Avame oma tooterakenduse, ja selles faili productsSlice.js. Te olete ilmselt märganud, et loome thunki fetchProducts eraldi funktsioonina? Me tegime nii, sest createSlice ei toeta thunkide määratlemist. Kuidas me siis sel juhul sunnime slaidiseerija products reduktorit reageerima nendele actionitele, mis on määratletud väljaspool products? Lõppude lõpuks peame ju töötlema actionid, mida saadab thunk fetchProducts.

Sellistel juhtudel on createSlice-l omadus extraReducers, mis võimaldab lisada lisa reduktoreid, mis omakorda töötlevad actioneid, mis ei ole määratletud antud slaidis.

Lisame nüüd funktsiooni createSlice kehasse peale omadust reducers koos kõigi reduktoritega veel ühe meetodi extraReducers:

extraReducers() {},

Me peame sellele meetodile andma objekti builder, millel on meetodid, mille abil saab lisada lisa reduktoreid:

extraReducers(builder) {},

Me kasutame üht builder meetoditest - addCase, mis võtab esimese parameetrina action creatori ja teise parameetrina reduktori. Üks actionitest, mida meile saadab fetchProducts päringu ajal on fetchProducts.pending, mis ütleb meile, et päring on saadetud. Sel juhul muudame staatuse 'in progress'-ks (enne oli see 'idle'):

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

Nüüd töötleme actioni, mis saadetakse eduka päringu korral. Siin me muudame mitte ainult staatust olekus 'success'-ks, vaid võtame tooted slaidiseerijasse products actioni payload-ist. Et koguda kõik tooted, vajame meetodit 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)
		})
},

Ebaõnnestunud päringu korral muudame staatuse 'fail'-ks ja kirjutame olekusse veateate:

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

Kui me käivitame oma rakenduse ja klõpsame menüüs 'Products' peal, siis mõne sekundi pärast (mäletate viivitust, mille me serveris seadsime?) näeme toodete nimekirja.

Samamoodi näeme muutusi ka Redux DevToolsis. Nüüd ilmuvad meie tooted ka olekusse (vaadake vahekaarti 'State'), kui klõpsasite actioni products/fetchProducts/fulfilled peal. Sinna ilmub ka uus staatus 'success'. Klõpsake nüüd actioni products/fetchProducts/pending peal ja vaadake, kuidas erineb nüüd vahekaart 'State'.

Ainus ebameeldiv moment, mis teil võib juhtuda (ma rääkisin sellest eelmisel tunnil) - on andmete pärimise duplikeerimine. Selle tulemusel saab meil nimekirjas mitte 8, vaid tervelt 16 toodet ja kriitilised hoiatused arendaaja konsoolis. Võtame selle järgmisel tunnil ette.

Avage oma õpilaste rakendus. Avage selles fail studentsSlice.js. Funktsiooni createSlice kehas peale omadust reducers lisage omadus extraReducers. Andke meetodile extraReducers builder.

Meetodi builder.addCase abil lisa töötlus actionitele pending, fulfilled ja rejected, mida saadab fetchStudents andmete pärimisel, nagu näidatud tunnis.