Redux-da Qo'shimcha Reducerlar

Keling, mahsulotlar ilovamizni ochaylik, uning ichidagi productsSlice.js faylini ochamiz. Ehtimol siz fetchProducts thunk-ni alohida funksiya sifatida yaratganimizni payqadingizmi? Biz shunday qildik, chunki createSlice thunk-larni aniqlashni qo'llab-quvvatlamaydi. Bunday holda, products slice reducerini products doirasidan tashqarida aniqlangan action-larga javob berishga qanday majbur qilamiz? Axir, aynan fetchProducts thunk tomonidan yuboriladigan action-larni qayta ishlashimiz kerak.

Bunday hollar uchun createSlice-da extraReducers xususiyati mavjud bo'lib, u qo'shimcha reducerlar qo'shish imkonini beradi, ular o'z navbatida ushbu slice-da emas, balki boshqa joyda aniqlangan action-larni qayta ishlaydi.

Keling, endi createSlice funksiyasi tarkibida, barcha reducerlar bilan reducers xususiyatidan keyin, yana bir extraReducers metodini qo'shamiz:

extraReducers() {},

Ushbu metodga biz builder obyektini uzatishimiz kerak, uning qo'shimcha reducerlar qo'shish uchun foydalanishimiz mumkin bo'lgan metodlari mavjud:

extraReducers(builder) {},

Biz builder metodlaridan biri - addCase dan foydalanamiz, u birinchi parametr sifatida action creator-ni, ikkinchi parametr sifatida reducer-ni qabul qiladi. fetchProducts so'rov yuborilayotganda yuboradigan action-lardan biri fetchProducts.pending bo'lib, bu bizga so'rov yuborilayotganini aytadi. Keling, bu holatda holatni 'in progress' ga o'zgartiramiz (ilgari u 'idle' edi):

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

Endi muvaffaqiyatli so'rov holatida yuboriladigan action-ni qayta ishlaymiz. Bu yerda biz nafaqat holatni 'success' ga o'zgartiramiz, balki products slice-iga mahsulotlarni action-ning payload dan olamiz. Barcha mahsulotlarni to'plash uchun bizga concat metodi kerak bo'ladi:

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

Muvaffaqiyatsiz so'rov holatida biz holatni 'fail' ga o'zgartiramiz va holatga xatolik xabarini yozamiz:

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

Agar biz hozir ilovamizni ishga tushirsak va menyuda 'Products' ni bossek, bir necha soniyadan keyin (serverda o'rnatgan kechikishimizni eslaysizmi?) mahsulotlar ro'yxatini ko'ramiz.

Xuddi shunday o'zgarishlarni Redux DevTools-da ham ko'ramiz. Endi bizning mahsulotlarimiz holatda ham paydo bo'ladi ('State' yorlig'iga qarang), agar siz products/fetchProducts/fulfilled action-iga bossangiz. U erda 'success' yangi holati ham paydo bo'ladi. Endi products/fetchProducts/pending action-iga bosing va 'State' yorlig'ida qanday farq borligini ko'ring.

Yuz berishi mumkin bo'lgan yagona noqulaylik (men bu haqda oldingi darsda aytgan edim) - bu ma'lumotlar so'rovining takrorlanishi. Natijada, ro'yxatimizda 8 emas, balki 16 ta mahsulot bo'ladi va ishlab chiquvchi konsolida kritik ogohlantirishlar paydo bo'ladi. Keling, bu masalani keyingi darsda hal qilaylik.

Talabalar ilovangizni oching. Uning ichidagi studentsSlice.js faylini oching. createSlice funksiyasi tarkibida, reducers xususiyatidan keyin, extraReducers xususiyatini qo'shing. extraReducers metodiga builder ni uzating.

builder.addCase metodi yordamida pending, fulfilled va rejected action-larini qayta ishlashni qo'shing, ular ma'lumotlar so'ralayotganda fetchStudents tomonidan yuboriladi, darsda ko'rsatilgandek.