Вступ до архітектурного зразка Flux

Відкрийте функціональний JavaScript було визнано однією з найкращих нових книг про функціональне програмування від BookAuthority !

Flux - це архітектурний шаблон, запропонований Facebook для будівництва СПА. Пропонується розділити програму на такі частини:

  • Магазини
  • Диспетчер
  • Перегляди
  • Action / Action Creators

Зберігати

Магазин управляє державою. Він може зберігати як стан домену, так і стан інтерфейсу користувача.

Зберігання та стан - це різні поняття. Стан - це значення даних. Store - це об’єкт поведінки, який управляє станом за допомогою методів. У разі управління книгами: список книг є державою, а BookStore керує цим списком.

Магазин управляє кількома об’єктами. Це єдине джерело істини щодо цих конкретних об’єктів. У додатку може бути багато магазинів. Наприклад: BookStore, AuthorStore, UserStore.

У магазині немає методів встановлення. Ви можете попросити зміни стану лише передавши дію диспетчеру.

Магазин прислухається до всіх дій і вирішує, з яких із них діяти. Зазвичай це означає switchзаяву. Як тільки магазин внесе зміни стану, він випустить подію змін. Магазин - це випромінювач подій.

Магазини не сприймають інші магазини як залежність.

Диспетчер

Диспетчер - це єдиний об'єкт, який транслює дії / події до всіх зареєстрованих магазинів. Магазини повинні реєструватися на події, коли програма запускається.

Коли дія надійде, вона передасть цю дію всім зареєстрованим магазинам.

Переглянути

Перегляд - це компонент інтерфейсу користувача. Він відповідає за візуалізацію інтерфейсу користувача та за обробку взаємодії з користувачем. Види представлені у структурі дерева.

Представлення прослуховують зміни магазину та повторно відтворюють.

Перегляди можна додатково розділити на Презентації та Перегляди контейнерів.

Представлення презентацій не підключаються до диспетчера або магазинів. Вони спілкуються лише завдяки власним властивостям.

Види контейнерів пов'язані з магазинами та диспетчером. Вони слухають події з магазинів і надають дані для компонентів презентації. Вони отримують нові дані, використовуючи загальнодоступні методи отримання магазинів, а потім передають ці дані в дерево переглядів.

Контейнер переглядає диспетчерські дії у відповідь на ітерацію користувача.

Дії

Дія - це звичайний об'єкт, який містить всю інформацію, необхідну для її здійснення.

Дії мають typeвластивість, що ідентифікує тип дії.

Оскільки об’єкти дії рухаються по додатку, я пропоную зробити їх незмінними.

Дії можуть надходити з різних місць. Вони можуть виходити з переглядів в результаті взаємодії користувачів. Вони можуть надходити з інших місць, таких як код ініціалізації, де дані можуть бути взяті з веб-API і запускаються дії для оновлення подань. Дія може відбуватися від таймера, який вимагає оновлення екрана.

Творці дій

Практика полягає в інкапсуляції коду, створюючи дії у функціях. Ці функції, що створюють та відправляють дії, називаються творцями дій.

Виклики через веб-API

При виконанні викликів через веб-API для оновлення користувальницького інтерфейсу, після виклику через веб-API відбуватиметься дія щодо оновлення магазину. Коли магазин буде оновлений, він випустить подію змін, і в результаті подання, яке прослуховує цю подію, буде рендерінг.

Виклики веб-API здійснюються у розробниках дій. Ми можемо витягти код, який виконує виклик API у функціях Web API Utils.

Односпрямований потік даних

Оновлення подань протікає в одному напрямку:

Перегляди не змінюють отримані дані. Вони вислуховують зміни цих даних, створюють дії з новими значеннями, але не оновлюють дані.

Магазини, представлення даних та будь-які інші дії не можуть безпосередньо змінити стан у (інших) магазинах. Вони повинні надіслати акцію через диспетчера

Потік даних коротший при читанні в магазині, ніж при записі. Потік даних при запису в магазині відрізняється між асинхронними та синхронними діями.

Зберігати читання

Зберігати записи в синхронних діях

Зберігати записи в асинхронних діях

Плюси

Архітектура Flux краща в програмі, де подання не відображаються безпосередньо в магазинах доменів. По-іншому, коли подання можуть створювати дії, які оновлюватимуть багато магазинів, а магазини можуть викликати зміни, які оновлюватимуть багато подань.

Дії можна продовжувати, а потім відтворювати.

Мінуси

Flux може додати зайвої складності додатку, де кожен перегляд відображається в одному магазині. У цьому додатку достатньо поділу між видом та сховищем.

Погляньте, наприклад, на тему Як створити тришаровий додаток за допомогою React.

Висновок

Магазини управляють державою. Вони змінюють стан лише прислухаючись до дій. Магазини сповіщають представлення для оновлення.

Представлення відображають інтерфейс користувача та обробляють взаємодію користувача. Перегляди контейнерів прислухаються до змін магазину.

Диспетчер транслює дії для всіх зареєстрованих магазинів.

Дії - це звичайні об'єкти.

Discover Functional JavaScript був названий одним ізнайкращі нові книги про функціональне програмування від BookAuthority !

Докладніше про застосування методів функціонального програмування в React погляньте на Functional React .

Вивчіть функціональний React на основі проекту за допомогою функціональної архітектури з React та Redux .

Підпишіться на Twitter