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:

products/productsSlice.jsextraReducers() {},

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

products/productsSlice.jsextraReducers(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):

products/productsSlice.jsextraReducers(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:

products/productsSlice.jsextraReducers(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:

products/productsSlice.js.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.