Reduxdagi Reducerlar

O'tgan darsda biz createSlice funksiyasi yordamida mahsulotlar uchun products slice va storeda saqlanadigan ushbu slice'ni yangilaydigan reducer yaratdik. Yana bir bor eslataman, Reduxda state ma'lumotlari reducerlar yordamida o'zgartiriladi.

Shuni yodda tutish kerakki, reducerlar bir qator cheklovlarga ega. Reducer faqat joriy state va action obyekti qabul qilingan qiymatlar asosida holatni yangilaydi, so'ngra stateni qanday o'zgartirishga qaror qiladi va uning yangi qiymatini qaytaradi.

Biz bilamizki, standart bo'yicha JavaScriptdagi obyektlar va massivlar mutatsiyalanuvchi (o'zgartirish mumkin). Shuningdek, biz state'ga to'g'ridan-to'g'ri o'zgartirish kiritish mumkin emasligini bilamiz, bunday hollarda faqat nusxalar bilan ishlash kerak. Ushbu qoidaga reducer ham bo'ysunishi kerak. Ammo bunday logikani qo'lda yozish juda charchatadigan va murakkab vazifa bo'lishi mumkin, va bu yerda createSlice funksiyasi yordamga keladi, u sizning "mutatsiyalanuvchi" kodingizni "mutatsiyalanmaydigan"ga aylantiruvchi Immer kutubxonasidan foydalanadi. Shunday qilib, gunoh qilish va hayotni soddalashtirish faqat createSlice yoki createReducer funksiyalaridan foydanganda mumkin.

Reducer cheklovlari qatoriga, shuningdek, asinxron logikadan foydalanish, tasodifiy qiymatlarni hisoblash va boshqa "yon ta'sirlar" ni bajarish kiradi. Endi, reducer bilan yaqindan tanishganimizdan so'ng, mahsulotlar bilan bog'liq ilovamizga qaytaylik.

Ilovamizda oldingi darslarda yaratgan store mavjud, lekin hozircha unda hech narsa yo'q. Keling, store.js faylimizni ochaylik va unga bir oz kod qo'shaylik. Boshlash uchun unga mahsulotlar uchun reducer funksiyasini import qilamiz:

import productsReducer from '../parts/products/productsSlice'

Endi reducer sifatida biz import qilingan productsReducer funksiyasini ko'rsatishimiz mumkin:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Yuqoridagi qator bilan biz store'imizga aytamizki, endi action paydo bo'lganda state.products slice'i uchun barcha ma'lumotlar productsReducer reduceri tomonidan yangilanadi.

Endi siz ilovani ishga tushirishingiz mumkin (esda tuting, konsolda noto'g'ri reducer haqidagi ogohlantirish yo'qoldi!), brauzerdagi Redux DevTools-ni oching va uning yorliqlari bo'ylab sayr qiling. Masalan, Inspector yorlig'idagi State yorlig'ini bosish orqali biz ilovani birinchi marta ishga tushirishda state ning boshlang'ich qiymati sifatida ko'rsatilgan ikkita mahsulot obyektini ko'rishimiz mumkin. Log monitor yorlig'ida biz global state qanday slice'larga ega ekanligini ko'ramiz - bu products slice'i, ikkihta obyektni o'z ichiga oladi. Shuningdek, Chart yorlig'iga ham nazar tashlang.

Talabalar bilan bog'liq ilovangizni oching va store.js faylining kodini darsda ko'rsatilgandek o'zgartiring.

Brauzeringizda ilovangizni ishga tushiring va Redux DevTools kengaytmasi yorliqlari bo'ylab sayr qiling.