Advanced ReactJS: React + Redux + Sagas uchun eng yaxshi amaliyotlar

o'ylash uchun qahva

Avvalambor, birinchi navbatda, React nima ekanligini tezkor tanishtirish. Bu foydalanuvchi interfeyslarini yaratish uchun ishlatiladigan JavaScript kutubxonasidir. U paydo bo'lganidan beri u rivojlanishning pog'onasini o'zgartirdi. Shunday qilib, agar siz React yoki Vue.js kabi veb-dasturlarni ishlab chiquvchi veb-ishlab chiqaruvchisi bo'lishni istasangiz, bugungi sanoat uchun juda muhimdir. Agar siz reaktsiyani o'rganishni endi boshlasangiz, bu juda yaxshi darslik. https://reactjs.org/tutorial/tutorial.html.

Reactni o'rganishni boshlaganim esimda. Men har doim kerak bo'lgan hamma narsani, hech qachon o'zgarib turadigan JavaScript tilini boshimdan ko'tarib o'rganolmayman degan tashvishli tuyg'ularni boshdan kechirdim va agar biron-bir narsani to'g'ri qilsam, o'zimdan so'rashni har doim o'zimdan so'rab turardim, bu haqiqatan ham eng yaxshi usulmi? qilish uchun? Yuzlab onlayn darslar, Youtube-dan qidiruvlar va tugallanmagan (va ehtimol yuvilmagan) kofelardan so'ng, men React JavaScript-ning jadvaliga nima kiritishga harakat qilayotganini aniq angladim.

Biroq, men har doim Reaktsiyaning barcha ilg'or tushunchalarini bitta ixcham darslikka birlashtiradigan qo'llanmani topish uchun doimo kurashib keldim.

Bundan tashqari, ushbu tushunchalarni katta manba kodi ichida ishlatilganda tushunish qiyin bo'lganini eslayman. Ushbu maqola to'ldirishga harakat qilayotgan bo'shliq. Murakkab vositalar va tushunchalar bizning oddiy ilovamizga kiritilgan, bu faqat darslik uchun mo'ljallangan va agar sizning ilovangiz ularga kerak bo'lmasa, siz ushbu tushunchalarni ishlatmasligingiz kerak.

Chit-chat bilan kifoyalaning. Suhbat kodi Ushbu repo-dan tayyor kodni yuklab oling va README-ga amal qiling, shunda biz bu erda nimani qurmoqchi ekanligimizni ko'rishingiz va his qilishingiz mumkin. https://github.com/jelorivera08/react-starter-pack.

Ilovaning ochilish sahifasi

Yuqorida, siz hisoblash holatini va ularning tegishli harakatlarini qo'zg'atadigan to'rtta tugmachani ko'rishingiz mumkin. Ularning harakatlari o'z-o'zini tushuntiradi.

tanlovchilar

Hisoblagich konteyneridagi selectors.js fayliga o'ting, biz ko'rib chiqayotgan birinchi zamonaviy tushuncha bu createSelector. Kodga nazar tashlab, avval const count o'zgaruvchisi state.get ('count') dan foydalanib, reduksiya holati daraxti ichidagi hisoblash holatini oladi.

Keyin, aytilgan usuldan foydalanib, selektor yaratamiz. Bu bizga redux state daraxtidan olingan holat / ma'lumotlarni formatlashimizga yordam beradi va buni amalga oshirish orqali biz oldingi tomonga biror narsa ko'rsatish uchun har safar kerak bo'lganda qayta qurish yoki maqsadli holatni formatlash bilan shug'ullanadigan yangi funktsiyalarni kodlashga ko'p vaqtni tejaymiz. -oxiri. Ushbu misolda men olgan holatimni o'zgartirmadim. Men shunchaki demo-maqsadlar uchun tekis holatga qaytdim.

Keyin paydo bo'lgan funktsiya mapStateToProps ichida ishlatiladi va mapStateToProps bilan birga tabiiy ravishda mapDispatchToProps-ni sozlash kerak bo'ladi.

harakatlar yaratish

Reduktor harakatlarini yuborishda, biz har doim dastur turini o'zgartirish uchun keyinchalik kiritilishini bildiradigan reduktorga uning turini va mos keladigan o'tish moslamasini e'lon qilishimiz kerak. Reduxsauce-dan createActions to'plamida ikkita toshni bitta tosh bilan urishimiz mumkin. Ushbu paketdan to'liq foyda olish uchun reduktorni reduxsauce bilan formatlashimiz kerak.

reduktor

Yuqorida bizning ilovamizning qisqartiruvchisi. Dastlabki holat JJ API tomonidan o'zgarmas holda saqlanadi va paket nomi noma'lum bo'lib, u boshlang'ich holatni mutatsiyadan saqlaydi. Reaktsiya ushbu kontseptsiyaga juda qat'iydir, shuning uchun buni doimo yodda tuting. reduxsauce-dan createReducer API ikkita argumentga ega.

Birinchidan, dastlabki holat. Ikkinchidan, harakat turlari va qiymatlari uchun kalitlarga ega ob'ekt, vazifa sifatida, reduktor vazifasini bajaradi, bu esa turga jo'natish chaqirig'iga mos keladi. Birlashtirish, keyin mos ravishda redux holat daraxtini o'zgartiradi. Asenkron API qo'ng'iroqlarini qanday boshqarishni bilmaydigan haqiqiy hayot ilovasi yo'qmi? To'g'ri.

redux saga

Mana bizning dasturimizning saga qismi. Bizning harakatlarimizdan tashqari hamma narsa bir xil. Biz ilgari yaratgan operatsiya turidan foydalanamiz va ularni keyinchalik kuzatuvchi holat daraxtimizga ta'sir qiladigan asinxron qo'ng'iroqlarni yuborish uchun tomoshabinlar dastagi ichida ishlatamiz.

Ilovani yaxshiroq asinxron qilish uchun tarmoq kechikishini masxara qilish uchun kechikish mavjud. Va, nihoyat, ishlashni unutmasligimizga ishonch hosil qilaylik.

kodni ajratish

Kodni ajratish veb-dasturlarning ishlashini yaxshilashning ajoyib usuli. JavaScript kodi foydalanuvchi ma'lumotlariga ko'proq ta'sir qiladi. Shuni esda tutingki, shuning uchun kodni ajratish bilan, u oxirgi foydalanuvchiga ma'lumotlarni iste'mol qilish samaradorligi uchun zarur bo'lgan qismning qismlarini yuklab olishga imkon beradi.

Xulosa,

U erda juda ko'p paketlar va vositalar mavjud, bu bizga yordam beradi, dastur muhandislari yanada toza va yanada samarali kodni yaratadilar. Reaktsiyada o'ylaydigan asosiy tizimni tushunish qiymati, xarajat bilan birga keladi.

Learning React sizdan kodlash paradigmangizni oldingi qismdagi kodlash oldingisiga qaraganda ancha boshqasiga o'zgartirishingizni talab qiladi. Ushbu maqolada muhokama qilgan vositalar va paketlar React-da chiroyli va samarali kodlash uchun zarur bo'lgan printsiplarni o'z ichiga oladi va aynan shu narsa mutlaqo ishlab chiquvchini yaratadi.

Har doim kichik narsalar.

Ushbu kichik maqola bilan qanday munosabatda bo'lishni tushunishingizga yordam berdim deb umid qilaman. Xursand bo'ling!