Լրացուցիչ reducer-ներ Redux-ում

Եկեք բացենք մեր ապրանքների հավելվածը, իսկ դրա մեջ productsSlice.js ֆայլը: Երևի դուք նկատել եք, որ մենք ստեղծեցինք thunk fetchProducts որպես առանձին ֆունկցիա? Մենք այդպես արեցինք, քանի որ createSlice-ը չի աջակցում thunk-ների սահմանումը: Ինչպե՞ս այս դեպքում ստիպենք products սլայսի reducer-ին արձագանքել այն action-ներին, որոնք սահմանված են products-ից դուրս: Չէ՞ որ մեզ հենց պետք է մշակել այն action-ները, որոնք ուղարկում է fetchProducts thunk-ը:

Նման դեպքերի համար createSlice-ն ունի extraReducers հատկությունը, որն թույլ է տալիս ավելացնել լրացուցիչ reducer-ներ, որոնք իրենց հերթին կմշակեն այն action-ները, որոնք սահմանված չեն տվյալ սլայսում:

Եկեք այժմ createSlice ֆունկցիայի մարմնում reducers հատկությունից հետո, որը պարունակում է բոլոր reducer-ները, ավելացնենք ևս մեկ մեթոդ extraReducers:

extraReducers() {},

Մենք այս մեթոդին պետք է փոխանցենք builder օբյեկտը, որն ունի մեթոդներ, որոնց օգնությամբ կարելի է ավելացնել լրացուցիչ reducer-ներ:

extraReducers(builder) {},

Մենք կօգտագործենք builder-ի մեթոդներից մեկը - addCase-ը, որն առաջին պարամետրով ընդունում է action creator, իսկ երկրորդ պարամետրով՝ reducer: fetchProducts-ի կողմից ուղարկվող action-ներից մեկը հարցման ժամանակ fetchProducts.pending-ն է, ինչը մեզ հուշում է, որ հարցումը ուղարկված է: Եկեք այս դեպքում փոխենք status-ը դառնալու 'in progress' (մինչ այդ այն եղել է 'idle'):

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

Այժմ մշակենք այն action-ը, որը կուղարկվի հարցման հաջողակ ավարտի դեպքում: Այստեղ մենք կփոխենք ոչ միայն state-ի status-ը դառնալու 'success', այլև կվերցնենք ապրանքները products սլայսի մեջ action-ի payload-ից: Բոլոր ապրանքները հավաքելու համար մեզ անհրաժեշտ կլինի 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)
		})
},

Հարցման անհաջողակ ավարտի դեպքում մենք կփոխենք status-ը դառնալու 'fail' և state-ի մեջ կգրենք սխալի մասին հաղորդագրությունը:

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

Եթե մենք հիմա գործարկենք մեր հավելվածը և մենյուում կտտացնենք 'Products'-ի վրա, ապա մի քանի վայրկյան հետո (հիշու՞մ եք դիտավորյալ դանդաղեցումը, որը մենք դրել էինք սերվերում) կտեսնենք ապրանքների ցուցակը:

Նույն կերպ մենք կտեսնենք փոփոխությունները նաև Redux DevTools-ում: Այժմ մեր ապրանքները կհայտնվեն նաև state-ում (նայեք 'State' ներդիրը), եթե դուք կտտացել եք products/fetchProducts/fulfilled action-ի վրա: Այնտեղ կհայտնվի նաև նոր status՝ 'success': Այժմ կտտացրեք products/fetchProducts/pending action-ի վրա և նայեք, թե ինչպես է տարբերվում 'State' ներդիրը:

Միակ տհաճ պահը, որը կարող է պատահել ձեզ հետ (ես այդ մասին խոսել էի նախորդ դասին) - դա տվյալների հարցման կրկնօրինակումն է: Արդյունքում, մեր ցուցակում կստացվի ոչ թե 8, այլ ամբողջ 16 ապրանք և կրիտիկական նախազգուշացումներ մշակողի կոնսոլում: Եկեք պարզաբանենք սա հաջորդ դասին:

Բացեք ձեր ուսանողների հավելվածը: Բացեք դրա մեջ studentsSlice.js ֆայլը: createSlice ֆունկցիայի մարմնում reducers հատկությունից հետո ավելացրեք extraReducers հատկությունը: Փոխանցեք extraReducers մեթոդին builder օբյեկտը:

builder.addCase մեթոդի օգնությամբ ավելացրեք մշակում pending, fulfilled և rejected action-ների համար, որոնք ուղարկում է fetchStudents-ը տվյալների հարցման ժամանակ, ինչպես ցույց է տրված դասում: