Redux'теги кошумча редьюсерлер

Келгиле, продуктуларыбыз менен тиркемебизди ачып, анын ичиндеги productsSlice.js файлын ачалы. Балким сиз fetchProducts thunk'ын өзүңүзчө функция катары түзгөнүңүздү байкап калдыңызбы? Биз муну createSlice thunks'тарды аныктоону колдобогондуктан кылдык. Анда кантип биз products слайсынын reducer'ын products тышында аныкталган экшендерге жооп берүүгө мажбурлайбыз? Бизге так fetchProducts thunk'ы жөнөткөн экшендерди иштетүү керек болчу.

Мындай учурлар үчүн createSlice'тын extraReducers касиети бар, ал кошумча редьюсерлерди кошууга мүмкүндүк берет, алар өз кезегинде бул слайста аныкталбаган экшендерди иштете алышат.

Эми createSlice функциясынын денесинде, reducers касиетинен кийин, бардык редьюсерлер менен дагы бир extraReducers методуң кошолу:

extraReducers() {},

Бул методго биз builder объектисин өткөрүшүбүз керек, анын кошумча редьюсерлерди кошууга жардам берген методдору бар:

extraReducers(builder) {},

Биз builder'дын методдорунун бирин - addCase'ты колдонобуз, ал биринчи параметр катары action creator'ди, экинчиси катары reducer'ди кабыл алат. fetchProducts'тын сурам жөнөткөндө жөнөтө турган экшендердин бири - fetchProducts.pending, ал бизге сурам жөнөтүлгөндүгүн айтат. Келгиле, бул учурда статустун 'in progress' болушун өзгөртөлү (буга чейин ал 'idle' болчу):

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

Эми ийгиликтүү сурам учурда жөнөтүлүүчү экшенди иштетели. Бул жерде биз стейттеги статусту гана 'success' деп өзгөртпөстөн, экшендин payload'ындагы продуктуларды products слайсына алабыз. Бардык продуктуларды чогултуш үчүн бизге 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)
		})
},

Ийгиликсиз сурам учурда биз статустун 'fail' болушун өзгөртөбүз жана стейтке ката тууралуу билдирүү жазабыз:

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

Эгер биз азыр тиркемебизди иштетип, менюдон 'Products' боюнча чыкылдасак, анда бир аз убакыттан кийин (серверде белгилеген кечиктирүүнү эстеп жатасызбы?) биз продуктулардын тизмесин көрө алабыз.

Ошол эле учурда биз өзгөрүүлөрдү Redux DevTools'то да көрө алабыз. Эми биздин продуктуларыбыз стейтте пайда болот ('State' кошумчасына караңыз), эгер сиз products/fetchProducts/fulfilled экшенине чыкылдасаңыз. Ошол жерде жаңы статус 'success' да пайда болот. Эми products/fetchProducts/pending экшенине чыкылдап, 'State' кошумчасы эми кандайча айырмаланарын көрүңүз.

Болушу мүмкүн болгон жалгыз жагымсыз учур (муну мен мурдагы сабакта айткан элем) - бул маалыматтарды сурап жатканда эки жолу кайталоо. Натыйжада, биздин тизмебизде 8 эмес, толугу менен 16 продукту болуп калат жана иштеп чыгуучунун консолунда сын маанилдеги эскертүүлөр пайда болот. Келгиле, муну кийинки сабакта карап чыгалы.

Студенттер менен тиркемеңизди ачыңыз. Анын ичиндеги studentsSlice.js файлын ачыңыз. createSlice функциясынын денесинде reducers касиетинен кийин extraReducers касиетин кошуңуз. extraReducers методуна builder'ды өткөрүңүз.

builder.addCase методунун жардамы менен pending, fulfilled жана rejected экшендерин иштетүүнү кошуңуз, ал экшендерди fetchStudents маалыматты сураганда жөнөтөт, сабакта көрсөтүлгөндөй.