2022-08-20 18:54:40
Reactda Mapper va AdapterlarBackend kafolatlamagan ma’lumotlarni render qilib foydalanuvchiga ko'rsatmoqchi bo’lsangiz, ba’zi paytlar ilovamiz dumalab tushish (crash) ehtimolligi bo’ladi, shu bilan birgalikda ko’p holatlarda biz componentimizni tekshiruvlar (check) bilan to’ldirib boramiz. Hamma yerda “agarlar” (if else) yoki optional chaining (?) operatorlaridan foydalanishni ko’paytirib tashlamasdan oldin bir narsaga nazar solshimiz va o’rganib olishimiz yaxshiroq bo’ladi. Bu narsalar
Mapper yoki Adapterlar deb nomlanadi, ma’lumotni kompentga uzatmasimizdan oldin yoki
Store ga joylamasimizdan oldin ularni birma bir ko’zdan kechirib yo’q ma’lumotlarni o’rniga boshqasini almashtirib qo’yishimiz mumkin. Ya’ni default ma’lumotlar yoki har bir type uchun default qiymatlar bilan almashtirish, masalan
string ko’rinishida keladigan qiymatlar uchun bo’sh
string,
number qiymatlari uchun esa 0 va hkz. Shunday qilib,
undefined yoki
null sifatida yuborilgan ma’lumotlarni va tekshiruvlarni kamaytirishimiz mumkin.
Tekshiruvlarni kamaytirish bizga nima foyda beradi?Birinchidan, tekshiruvlari ko’p ko’dlarni o’qib ko’rgan bo’lsangiz, har bir narsani tekshiruvdan qanday o’tayotganini bilib olish uchun, o’zingiz ham interpretor sifatida ishlashingizga tog’ri keladi, ya’ni mantiqiy zanjirni tushunib olib ularni o’zingiz miyyangizda birma bir ulab chiqasiz. Agar bu tekshiruvlarni, ma’lumot olish paytida bir marotaba ko’zdan kechirib tog’rlab qo’ysangiz, ko’dingiz o’qilishi ancha osonroq bo’ladi.
Ikkinchidan, agar ilova uchun testlar yozib ko’rgan bo’lsangiz va ilovani testlar bilan qoplanganlik darajasini (test coverage) ko’rish uchun “Istanbul” dan foydalangan paytingiz, foizni ko'paytirish uchun, har bir tekshiruvlar (condition) lar uchun alohida test yozishingizga tog’ri keladi. Sizlarni ishontirib aytamanki, bu juda ham yaxshi jarayon emas , ma’lumotni bor yo’qligiga tekshirish uchun yozilgan testlar odamni juda ham qiynab yuboradi.
Mapperlar qanday yoziladi?Siz har qanday ma’lumotni olganingizdan so’ng, siz undagi har bir elementni
map metodi orqali aylanib chiqishingiz kerak bo’ladi. Masalan sizda foydalanuvchilar ro’yihati ko’rsatilgan massiv bor, bu massiv obyektlardan tashkil topgan. Obyektda,
username, firstname, lastname, age, occupation kalit so’zlarili ma’lumotlar bor, birinchi 3 ma’lumot hardoim kelishi aniq bo’lsa, qolgan 2 tasi, ya’ni
age va
occupation hardoim ham backenddan kelavermaydi deb tasavvur qilaylik. Bir xil obyetlarda u bor bo’lsa, ikkinchisida bo’lmasligi mumkin, agar siz yo’q ma’lumotni olishga harakat qilsangiz
undefined qiymatiga duch kelishingiz mumkin. Ekranga chiqarayotgan paytingizda, yoshni va ish joyini ham NP (Not Provided - taqdim etilmagan) so’zi bilan almashtirishingiz mumkin, buni qilishni bir yo’li componentda tekshiruv qo’yish, ikkinchisi mapperdan foydalanish. Mapperda, map metodi bilan aylanib chiqish vaqtida ikki so’roq belgisi ?? (Nullish coalescing operator) orqali agar qiymatimiz
nullish qiymat bo’lsa, boshqa ma’lumotni joylab ket deyishingiz mumkin bo’ladi. Shu bilan masala hal va sizni tekshiruvlaringiz bir necha barobar kamayadi va ilovangiz kamroq dumalab tushadi
Mapperlar va ularning foydasi haqida 2 yil oldin ustozim Maqsud aka aytgandilar, mana eshitishdan faol ishlatishgacha shuncha vaqt o’tdi . Vaqtliroq quloq solganimda kamroq tekshiruvlar yozib chiqqan bo’lar edim balki. Hardoimgi gap, Seniorlardan (ustozlardan) o’rganing
Quyidagi rasmda User ma’lumotlari uchun TypeScript da yozilgan mapperniko’rishingiz mumkin. Barchasi juda ham oddiy.
Mapperlarni yozish haqida qisqa videodarslik bo’lshini hohlaysizmi?
@khumoyun_codes
1.5K views15:54
K
