Reduxdagi state tuzilmasini o'zgartirish

Bizning Redux ilovamizni qandaydir tashqi server bilan o'zaro aloqasi uchun amalga oshiradigan birinchi bosqich - bu ilova ishga tushganida unda saqlanadigan ma'lumotlarni olishdir. Ammo oldin, keling, ilovimizga ba'zi o'zgartirishlar kiritamiz.

Mahsulotlar bilan ishlaydigan ilovamizni ochamiz, va unda productsSlice.js faylini ochamiz. initialState ning ta'rifiga e'tibor bering. Dastlab, mahsulotlar slaysimiz productsSlice - bu ichida mahsulotlar ma'lumotlari bilan ob'ektlar (bizning holatda ikkitasi) bo'lgan massiv. Birinchidan, endi biz ularni serverdan yuklayotganimiz sababli, ularni initialState dan olib tashlashimiz kerak. Ikkinchidan, biz serverga API so'rovlarini yuboramiz va ularning holati haqida bilish muhim bo'ladi. Bu ikki narsani hisobga olgan holda, keling, initialState ni qayta ko'rib chiqaylik. Endi u faqat products (dastlab bu yerda hech qanday ma'lumot bo'lmaydi, faqat bo'sh massiv), status va error maydonlari bo'lgan oddiy ob'ekt bo'lsin. Endi bizning initialState uchun kod biroz qisqaroq bo'ladi:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Hozircha biz statusni 'idle' (harakatsiz) deb belgiladik, chunki dastlab biz hech qanday so'rov yubormaymiz, lekin umuman olganda u o'zgaradi va 'loading' (yuklanmoqda), 'succeeded' (muvaffaqiyatli bajarildi), 'failed' (yuklash muvaffaqiyatsiz tugadi) qiymatlarini qabul qilishi mumkin. Esda tuting, statusni belgilash uchun sizga qulay bo'lgan har qanday nomlarni tanlashingiz mumkin.

Kod bo'yicha pastga tushamiz. initialState o'zgarganidan so'ng, biz reducer funksiyalarida ushbu state bilan ishlaydigan kodni ham o'zgartirishimiz kerak. productAdded uchun kodni ko'rib chiqamiz:

state.push(action.payload)

Endi yangi mahsulotlarni oddiygina mahsulotlar uchun state ga emas, balki uning state.products xususiyatiga qo'shamiz. Shuning uchun, yuqoridagi qatorni quyidagiga almashtiramiz:

state.products.push(action.payload)

Shunga mos ravishda, reactionClicked reduceri uchun ham bir xil o'zgartirishlarni amalga oshiramiz. O'rniga:

const currentProduct = state.find((product) => product.id === productId)

Endi bo'ladi:

const currentProduct = state.products.find((product) => product.id === productId)

productUpdated reduceri kodida state ni state.products ga o'zingiz almashtiring.

Talabalar bilan ishlaydigan ilovingizni oching. Unda studentsSlice.js faylini oching. Endi sizning initialState ingiz uchta xususiyatga ega bo'lsin: students, status, error - uni darsda ko'rsatilgandek o'zgartiring.

Shunga mos o'zgartirishlarni keyinroq kodda ham amalga oshiring. Uchta reducer funksiyalaringiz kodi uchun state ni state.students ga almashtiring.