Redux-də Əlavə Reduktorlar

Gəlin məhsullarla bağlı tətbiqimizi açaq, onun içindəki productsSlice.js faylını açaq. Yəqin ki, siz fetchProducts thunk-ni ayrıca funksiya kimi yaratdığımızı fərq etmisiniz? Biz bunu belə etdik, çünki createSlice thunk-ların təyin edilməsini dəstəkləmir. Bəs bu halda products diliminin reduktorunu products-dən kənarda təyin edilən aksiyalara cavab verməyə necə məcbur edə bilərik? Axı biz məhz fetchProducts thunk-unun göndərdiyi aksiyaları emal etməliyik.

Bu kimi hallar üçün createSlice-in extraReducers xassəsi var, bu da əlavə reduktorlar əlavə etməyə imkan verir, onlar da öz növbəsində bu dilimdə deyil, kənarda təyin edilən aksiyaları emal edəcəklər.

Gəlin indi createSlice funksiyasının gövdəsində reducers xassəsindən sonra, bütün reduktorlarla birlikdə bir daha extraReducers metodu əlavə edək:

extraReducers() {},

Biz bu metoda builder obyektini ötürməliyik, onun da əlavə reduktorlar əlavə etmək üçün istifadə edilə bilən metodları var:

extraReducers(builder) {},

Biz builder-in metodlarından birini istifadə edəcəyik - addCase, birinci parametr kimi aksiya yaradıcısını, ikinci parametr kimi isə reduktoru qəbul edir. fetchProducts tərəfindən sorğu zamanı göndərilən aksiyalardan biri fetchProducts.pending-dir, bu da bizə sorğunun göndərildiyini bildirir. Gəlin bu halda statusu 'in progress' olaraq dəyişək (bundan əvvəl 'idle' idi):

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

İndi uğurlu sorğu halında göndəriləcək aksiyanı emal edək. Burada biz təkcə vəziyyətdəki statusu 'success' olaraq dəyişməyəcəyik, həm də products diliminə məhsulları aksiyanın payload hissəsindən götürəcəyik. Bütün məhsulları toplamaq üçün bizə concat metodu lazım olacaq:

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)
		})
},

Uğursuz sorğu halında biz statusu 'fail' olaraq dəyişəcəyik və vəziyyətə xəta mesajını yazacağıq:

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

Əgər biz indi tətbiqimizi işə salsaq və menyuda 'Products'-a klik etsək, onda bir neçə saniyədən sonra (serverdə təyin etdiyimiz gecikməni xatırlayırsınız?) məhsul siyahısını görəcəyik.

Eynilə biz dəyişiklikləri Redux DevTools-da da görəcəyik. İndi məhsullarımız veytdə də görünəcək ('State' vərəqinə baxın), əgər siz products/fetchProducts/fulfilled aksiyasına klik etsəniz. Orada yeni status 'success' də görünəcək. İndi products/fetchProducts/pending aksiyasına klik edin və 'State' vərəqinin indi nə ilə fərqləndiyinə baxın.

Baş verə biləcək yeganə xoşagəlməz an (mən bu barədə əvvəlki dərsdə danışmışdım) - bu məlumat sorğusunun təkrarlanmasıdır. Nəticədə, siyahımızda 8 deyil, tam 16 məhsul və developer konsolunda kritik xəbərdarlıqlar alacağıq. Gəlin bununla növbəti dərsdə məşğul olaq.

Tələbələrlə bağlı tətbiqinizi açın. Ondakı studentsSlice.js faylını açın. createSlice funksiyasının gövdəsində reducers xassəsindən sonra extraReducers xassəsini əlavə edin. extraReducers metoduna builder ötürün.

builder.addCase metodu ilə pending, fulfilled və rejected aksiyalarının emal edilməsini əlavə edin, onlar fetchStudents tərəfindən məlumat sorğusu zamanı göndərilir, dərsdə göstərildiyi kimi.