Flux arxitekturasi

Flux — bu Facebook (hozirgi Meta) tomonidan ommalashtirilgan, klient tomonidagi (client-side) veb-ilovalarni yaratish uchun mo’ljallangan arxitekturaviy dizayn pattern hisoblanadi(rasmga qarang). U ilova ichidagi ma’lumotlar oqimini prognozli qilish uchun bir tomonlama ma’lumot oqimini ta’minlaydi.

Flux architecture image

Flux arxitekturasining asosiy tushunchalari quyidagilardan iborat:

Actions (Harakatlar)

Actions — bu yangi ma’lumotlarni va ularni aniqlovchi tip xususiyatini o’z ichiga olgan oddiy obyektlar. Ular tizimga kiruvchi tashqi va ichki ma’lumotlarni ifodalaydi, masalan, foydalanuvchi bilan o’zaro ta’sirni, server javoblari va form input’lari. Action’lar markaziy Dispatcher orqali turli Store’larga uzatiladi:

// Action obyekti misoli
{
  type: 'ADD_TODO',
  text: 'Flux Arxitekturasini o'rganish'
}

Dispatcher (Dispetcher)

Dispatcher — bu Flux arxitekturasining markaziy qismi. U action’larni qabul qiladi va ularni ilovadagi ro’yxatdan o’tgan store’ga uzatadi. U callback(qayta chaqirish funksiyalar)’lar ro’yxatini boshqaradi va har bir store o’zini va o’zining callback funksiyasini dispetcher’ga ro’yxatdan o’tkazadi. Action jo’natilganda, u barcha ro’yxatdan o’tgan callback’larga yuboriladi:

// Action ni dispetcherlash misoli
Dispatcher.dispatch(action);

Stores (Saqlovchilar)

Store’lar ilovaning holati va logikasini saqlaydi. Ular MVC arxitekturasidagi modellarga biroz o’xshaydi, lekin ko’plab obyektlarning holatini boshqaradi. Store’lar dispetcher bilan ro’yxatdan o’tadi va action’larni qayta ishlash uchun callback funksiyalarini taqdim etadi. Store’ning holati yangilanganda, u o’zgarish sodir bo’lganini bildirish uchun views’ga change(o’zgarish) event’ini tarqatadi:

// Store misoli
class TodoStore extends EventEmitter {
  constructor() {
    super();
    this.todos = [];
  }
 
  handleActions(action) {
    switch (action.type) {
      case "ADD_TODO":
        this.todos.push(action.text);
        this.emit("change");
        break;
      default:
        // hech qanday amal bajarilmaydi
    }
  }
}

Views (Ko’rinishlar)

Views — bu React komponentlari. Ular store’dan keladigan o’zgarish event’larini tinglaydi va ularga bog’liq bo’lgan ma’lumotlar o’zgarganda o’zlarini yangilaydi. Shuningdek, ular tizim holatini yangilash uchun yangi action’lar yaratishi mumkin, shu tariqa ma’lumotlarning bir tomonlama aylanishini shakllantiradi.

Flux arxitekturasi tizim bo’ylab bir tomonlama ma’lumot oqimini rag’batlantiradi, bu esa vaqt o’tishi bilan o’zgarishlarni kuzatishni osonlashtiradi. Ushbu prognozlilik(predictibility) xususiyati keyinchalik kodni yanada optimallashtirish uchun kompilyatorlar uchun asos bo’lib xizmat qilishi mumkin, masalan, React Forget bilan (bu haqida keyinroq batafsil gaplashamiz).

Flux arxitekturasining afzalliklari

Flux arxitekturasi veb-ilovalardagi murakkablikni boshqarish va ularni oson maintain bo’lishini ta’minlashda turli xil foydali jihatlar keltiradi. Quyida ba’zi muhim afzalliklari keltirilgan:

Yagona ishonch manbai (Single source of truth): Flux ilovaning state’ini bir markaziy boshqaruvda saqlashni ta’kidlaydi, bu store’larda saqlanadi. Ushbu markazlashtirilgan state menejmenti ilovaning xatti-harakatini prognoz qilish mumkin va bu tushunishni osonlashtiradi. Bu ko’p, o’zaro bir-biriga bog’liq bo’lgan markazlashtirilgan manbalar bilan bog’liq muammolarni bartaraf etadi, chunki bu xatoliklar va ilovada o’zaro mos kelmaydigan holatga olib kelishi mumkin.
Testlanuvchanlik: Flux’ning aniq strukturalari va prognoz qilinadigan ma’lumotlar oqimi ilovani juda testlanuvchan qiladi. Tizimning turli qismlari (masalan, actio’nlar, dispetcher, store’lar va view’lar) orasidagi ma’suliyatlarni ajratish har bir qismni alohida unit testlashni osonlashtiradi. Bundan tashqari, ma’lumotlar oqimi bir tomonlama bo’lganda va state ma’lum, prognoz qilish mumkin bo’lgan joylarda saqlanganda, test yozish ancha oson bo’ladi.
Ma’suliyatlarni ajratish (Separation of concerns, SoC): Flux, yuqorida aytilganidek, tizimning turli qismlarining ma’suliyatlarini aniq ajratib qo’yadi. Ushbu ajratish tizimni yanada modulli, maintain qilishni va tushunishni oson qiladi. Har bir qism aniq belgilangan ma’suliyatga ega va bir tomonlama ma’lumotlar oqimi bu qismlar qanday o’zaro aloqada bo’lishini aniq ko’rsatib beradi.

Flux arxitekturasi mustahkam, kengaytiriladigan va oson maintain qilinadigan veb-ilovalar qurish uchun ishonchli poydevor taqdim etadi. Uning bir tomonlama ma’lumotlar oqimi, markaziy boshqaruvi va ma’suliyatlarning ajratilishiga urg’u berishi, ilovalarni ishlab chiqish, testlash va debug qilishni ancha osonlashtiradi.

React’ning ommaga chiqishi Xulosa