Redux-та қосымша редьюсерлер

Өнімдер қолданбасын ашайық, онда productsSlice.js файлын ашайық. Сіз бәлкім біздің thunk fetchProducts-ты жеке функция ретінде жаратқанымызды байқадыңыз ба? Біз мұны 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 деректерді сұраған кезде жібереді, сабақта көрсетілгендей.