Redux ilova miyasini saqlang

Redux ilovasini arxitekturalashning eng yaxshi usuli

Ushbu maqola Reduxda qanday o'ylash haqida. Biz ushbu ajoyib kutubxonadan qanday qilib dasturimizni yanada barqaror, barqaror va xizmat ko'rsatadigan qilib foydalanishimiz mumkinligini tushunishga harakat qilamiz. Bu agnostik til, ammo biz React bilan Reaksni qamrab olamiz.

Ilgari Redux-dan foydalanmaganlar uchun men hujjatlardan iqtibos keltiraman:

Redux - bu JavaScript dasturlari uchun oldindan aytib bo'ladigan holat konteyneridir.

Bu faqat 2kb kutubxona bo'lib, katta JavaScript dasturlarini saqlashdagi eng katta muammolardan birini hal qiladi: davlat boshqaruvi.

Ushbu maqola Redux haqida emas, chunki bu haqda allaqachon ko'plab maqolalar mavjud. Aksincha, Redux dasturini qanday qilib vizualizatsiya qilish va undan samarali foydalanish haqida gap boradi.

Aytaylik, biz elektron tijorat dasturini qurmoqdamiz, unda katalog, mahsulot tafsilotlari va to'lovlarni muvaffaqiyatli bajarish kabi asosiy sahifalar mavjud.

Quyida ilova qanday ko'rinishini ko'rsatadigan sim kartalari:

Katalog sahifasiMahsulot sahifasiTo'lov muvaffaqiyatli amalga oshirildi

Demak, Redux-da arxitektura qilish biz bitta ob'ekt sifatida vizualizatsiya qilishimiz kerakligini anglatadi va har bir sahifa sub-sub-sub.

Redux ilovasini yaratishning to'rtta bosqichi mavjud:

  1. Davlat daraxtini ingl
  2. Reduktorlaringizni loyihalashtiring
  3. Amallarni bajarish
  4. Taqdimotni amalga oshiring

1-qadam: Davlat daraxtini ingl

Yuqoridagi sim to'siqlaridan foydalanib, bizning davlat daraxtimizni yarataylik.

Ilova holati daraxti

Bu eng muhim qadam. Biz davlat daraxtimizni vizual ravishda tayyorlaganimizdan so'ng, Redux texnikasini amalga oshirish juda oson bo'ladi! Nuqtali doiralar - bu ilova tomonidan ulashiladigan holatlar, qattiq doiralar - sahifaga xos holatlar.

2-qadam: Reduktorlaringizni loyihalashtiring

Agar siz reduktor nima ekanligini bilmoqchi bo'lsangiz, men to'g'ridan-to'g'ri hujjatlardan iqtibos keltiraman:

Kamaytiruvchilar do'konga yuborilgan harakatlarga javoban ilova holati qanday o'zgarishini aniqlaydilar. Shuni esda tutingki, xatti-harakatlar faqat nima bo'lganligini tasvirlaydi, lekin dasturning holati qanday o'zgarishini tasvirlamaydi.

Muhim ahamiyatga ega bo'lgan holatlarning har biri o'zlarining reduktorlariga ega bo'lishi mumkin. Keyinchalik, biz ularni bitta ildiz reduktoriga birlashtira olamiz, ular oxir-oqibat do'konni aniqlaydi (dastur haqiqatining yagona manbai). Bu erda haqiqiy kuch keladi: sizning holatlaringizni va ularning xatti-harakatlarini to'liq nazorat qilasiz. Do'kon tomonidan hech narsa sezilmaydi. Jim turgan kuzatuvchi kuzatib turadi.

Do'konning qo'riqchisi

Keling, yuqorida biz yaratgan amaliy daraxt daraxti yordamida reduktorni qanday loyihalashtirish mumkinligini ko'rib chiqaylik.

// Ildizni kamaytirish vositasi
const rootReducer = kombinatsiyaReducer ({
  sarlavha: sarlavhaReducer,
  login: loginReducer,
  footer: footerReducer,
  keng tarqalgan: commonReducer,
  mahsulot: mahsulotReducer,
  katalog: katalogReducer,
  to'lov: to'lovReducer
});

Ildiz reduktori hammasini aytadi. Unda do'kon ilova haqida bilishi kerak bo'lgan barcha narsalarni o'z ichiga oladi.

Endi subed subyekt sarlavhasi Reducer qanday ko'rinishga ega ekanligini ko'rib chiqamiz.

Sarlavha holatini qanday yaratganimizni eslaysizmi?

Sarlavha holati daraxti
// Sarlavhani kamaytirish vositasi
const headerReducer = kombinatsiyaReducer ({
  menyu: menyuReducer,
  qidiruv: qidiruvReducer,
  manzil: manzilReducer
});

Bizning reduktorimiz bu bizning davlat daraxtida ilgari yaratgan narsamizning nusxasi. Bu vizualizatsiya kuchidir.

Bir reduktorda ko'proq reduktorlar borligiga e'tibor bering. Bitta katta reduktorni yaratishimiz shart emas. Kichik reduktorlarga osonlikcha bo'linishi mumkin, chunki ularning har biri o'ziga xos xususiyatlarga ega va o'ziga xos operatsiyalarga ega. Bu bizga katta ilovalarni saqlash uchun juda muhim bo'lgan mantiqiy bo'linishni yaratishga yordam beradi.

Endi oddiy reduktor faylini qanday o'rnatish kerakligini tushunaylik, masalan searchReducer.

// Qidiruv qisqartirgichi
const initialState = {
  yuklami: [],
  isLoading: noto'g'ri,
  xato: {}
}
searchReducer eksport funktsiyasi (holat = initialState, harakat) {
  switch (action.type) {
    FETCH_SEARCH_DATA ishi:
      return {
        ... holat,
        isLoading: haqiqiy
    };
    
    FETCH_SEARCH_SUCCESS ishi:
      return {
        ... holat,
        yuk yuki: action.payload,
        isLoading: noto'g'ri
      };
    
    FETCH_SEARCH_FAILURE ishi:
      return {
        ... holat,
        xato: action.error,
        isLoading: noto'g'ri
      };
    holat RESET_SEARCH_DATA:
      return {... holat, ... initialState}
    standart:
      qaytish holati;
  }
}

Ushbu reduktor naqsh qidiruv API chaqirilganda qidiruv holatida mumkin bo'lgan o'zgarishlarni aniqlaydi.

FETCH_SEARCH_DATA, FETCH_SEARCH_SUCCESS, FETCH_SEARCH_FAILURE, RESET_SEARCH_DATA

Yuqorida aytilganlarning barchasi qanday mumkin bo'lgan harakatlar bajarilishini belgilaydigan mumkin bo'lgan barqarorliklardir.

Eslatma: Agar komponentni yechish paytida ma'lumotlarni qayta tiklashimiz kerak bo'lsa, RESET_SEARCH_DATA amalini bajarish juda muhimdir.

3-qadam: Amallarni bajarish

API qo'ng'iroqlari bo'lgan har bir harakat odatda ilovada uch bosqichdan o'tadi.

  1. Yuklash holati -> FETCH_SEARCH_DATA
  2. Muvaffaqiyat -> FETCH_SEARCH_SUCCESS
  3. Muvaffaqiyatsiz -> FETCH_SEARCH_FAILURE

Ushbu harakat turlarini saqlab turish, bizning dasturimizda API chaqirilganda ma'lumotlar oqimini tekshirishga yordam beradi.

Oddiy harakatlar qanday bo'lishini tushunish uchun kodga o'taylik.

fetchSearchData eksport funktsiyasi (args) {
  asinkni qaytarish (yuborish) => {
    // Yuklash holatini boshlang
    jo‘natish ({
      turi: FETCH_SEARCH_DATA
    });
    urinib ko'ring {
      // API qo'ng'iroq qiling
      const result = kuting fetchSearchData (args.pageCount, args.itemsPerPage);
      
     // Muvaffaqiyatni qisqartirish vositasida yuklamani yangilang
     jo‘natish ({
        turi: FETCH_SEARCH_SUCCESS,
        yuk yuki: natija,
        currentPage: args.pageCount
      });
    } qo'lga olish (err) {
     // Ishlamay qolganda reduktorda yangilanish xatosi
     jo‘natish ({
        turi: FETCH_SEARCH_FAILURE,
        xato: xato
      });
    }
  };
}

Ma'lumotlar oqimi do'kon tomonidan harakatlar orqali qanday kuzatilayotganiga e'tibor bering. Bu ilovadagi har bir va har bir o'zgarish uchun javob beradi.

Bunda shunga o'xshash harakatlar turli holatlar reduktorlaridagi har bir o'zgarish uchun yoziladi.

Redux-ning eng katta afzalliklaridan biri bu har bir narsani abstraktsiya qilishdir.

Redux dasturidagi ma'lumotlar oqimi

4-qadam: Taqdimotni amalga oshiring

import qilish React, {tarkibiy qism 'reaktsiya' dan;
'реак-redux' dan {ulanish} ni import qilish
'./action/fetchSearchData' dan fetchSearchData-ni import qilish;
'./SearchData' dan SearchData-ni import qilish;
const Search = (rekvizitlar) => (
  
);
const mapStateToProps = (holat) => ({
  qidiruv: state.header.search.payload
});
const mapDispatchToProps = {
  fetchSearchData
};
eksport uchun standart ulanish (mapStateToProps, mapDispatchToProps) (Qidiruv)

Ko'rib turganingizdek, taqdimot komponenti juda sodda va tushunish oson.

Xulosa

Redux-dan foydalanib topgan eng katta afzalliklari haqida aytib o'tmoqchiman:

  1. Bu, albatta, kod hidini kamaytiradi.
  2. Kodni abstraktsiyalash osonroq.
  3. Redux shuningdek, bizni o'zgarmaslik, funktsional dasturlash va boshqa ko'plab printsiplar bilan tanishtiradi.
  4. Bu sizga har bir harakatni vizual ravishda ko'rishga va ularni "sayohat vaqtini" kuzatishga imkon beradi.

Umid qilamanki, ushbu maqola Redux nima uchun haqiqatan ham ajoyib ekanligi va biz qanday qilib vizualizatsiya kuchidan qanday qilib barqaror dasturlarni amalga oshirishimiz mumkinligi to'g'risida aniqroq tasavvurga ega bo'lishga yordam beradi.

Yangi maqolalar haqida ko'proq ma'lumot olish va so'nggi yangiliklarning yangiliklaridan xabardor bo'lish uchun meni twitter-da kuzatib boring. Shuningdek, boshqalarga bu haqda bilishga yordam berish uchun ushbu maqolani twitterda ulashing. Ulashish bu g'amxo'rlik ^ _ ^.

O'zingizning sevgingizni namoyish qilish uchun 50 martagacha qarsak chalishingiz mumkinligini unutmang!

Ba'zi foydali manbalar

  1. https://redux.js.org/
  2. https://github.com/reduxjs/redux/blob/master/examples
  3. https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.c4yhhvk0d

Oldingi maqolalarim

  1. https://medium.freecodecamp.org/how-to-use-redux-persist-when-migrating-your-states-a5dee16b5ead
  2. https://codeburst.io/redux-observable-to-the-rescue-b27f07406cf2
  3. https://codeburst.io/building-webapp-for-the-future-68d69054cbbd
  4. https://codeburst.io/cors-story-of-requesting-twice-85219da7172d