Papildu reducers Redux

Atversim mūsu lietotni ar produktiem, un tajā failu productsSlice.js. Iespējams, jūs esat pamanījuši, ka mēs izveidojām thunk fetchProducts kā atsevišķu funkciju? Mēs tā izdarījām, jo createSlice neatbalsta thunk definēšanu. Kā tad mums šajā gadījumā likt slaisa products reduceri reaģēt uz action, kuri ir definēti ārpus products? Galu galā mums tieši jāapstrādā action, kurus nosūta thunks fetchProducts.

Šādiem gadījumiem createSlice ir īpašība extraReducers, kas ļauj pievienot papildu reducerus, kuri savukārt apstrādās action, kuri nav definēti šajā slaisī.

Tagad funkcijas createSlice ķermenī pēc īpašības reducers ar visiem reduceriem pievienosim vēl vienu metodi extraReducers:

extraReducers() {},

Šai metodei mums jāpadod objekts builder, kuram ir metodes, ar kuru palīdzību var pievienot papildu reducerus:

extraReducers(builder) {},

Mēs izmantosim vienu no builder metodēm - addCase, kas pirmo parametru pieņem action creator, bet otro - reducer. Viens no action, ko mums nosūtīs fetchProducts pie pieprasījuma, ir fetchProducts.pending, kas norāda mums, ka pieprasījums ir nosūtīts. Šajā gadījumā mainīsim statusu uz 'in progress' (īsāk tas bija 'idle'):

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

Tagad apstrādāsim action, kas tiks nosūtīts gadījumā, ja pieprasījums ir veiksmīgs. Šeit mēs mainīsim ne tikai statusu stetā uz 'success', bet arī paņemsim produktus slaisī products no payload action. Lai savāktu visus produktus, mums būs vajadzīga metode 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)
		})
},

Gadījumā, ja pieprasījums neizdodas, mēs mainīsim statusu uz 'fail' un ierakstīsim stetā kļūdas ziņojumu:

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

Ja mēs tagad palaidīsim mūsu lietotni un izvēlnē noklikšķināsim uz 'Products', tad pēc pāris sekundēm (atceraties par aizkavi, ko mēs iestatījām serverī?) ieraudzīsim sarakstu ar produktiem.

Tieši tāpat mēs ieraudzīsim izmaiņas arī Redux DevTools. Tagad mūsu produkti parādīsies stetā (apskatiet cilni 'State'), ja jūs noklikšķinājāt uz action products/fetchProducts/fulfilled. Tur parādīsies arī jaunais statuss 'success'. Tagad noklikšķiniet uz action products/fetchProducts/pending un apskatiet, kā tagad atšķiras cilne 'State'.

Vienīgā nepatīkamā situācija, kas jums varētu gadīties (es par to runāju iepriekšējā nodarbībā) - ir datu pieprasījuma dublēšanās. Rezultātā mums sarakstā būs ne 8, bet veseli 16 produkti un kritiskie brīdinājumi izstrādātāja konsolē. Tiksim gudriem ar to nākamajā nodarbībā.

Atveriet savu lietotni ar studentiem. Atveriet tajā failu studentsSlice.js. Funkcijas createSlice ķermenī pēc īpašības reducers pievienojiet īpašību extraReducers. Piedodiet metodei extraReducers builder.

Ar builder.addCase metodes palīdzību pievienojiet apstrādi action pending, fulfilled un rejected, kurus nosūta fetchStudents, pieprasot datus, kā parādīts nodarbībā.