Чи повинні магазини флюсу або дії (або обидва) торкатися зовнішніх послуг?

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

-OR-

... чи повинні магазини бути тупими одержувачами незмінних даних від дій (а дії будуть тими, які отримують / надсилають дані між зовнішніми джерелами? Дані перед встановленням власної бази даних щодо непорушних даних, які їм подавали в результаті дії.

Мені здається, що це має бути те чи інше (а не суміш обох). Якщо так, то чому один бажаний / рекомендований над іншим?

Я бачив, як схема потоку реалізується обома способами, і після того, як я зробив обидва способи (спочатку йдучи з колишнім підходом), я вважаю, що магазини повинні бути тупими одержувачами даних від дій, і що асинхронна обробка записів повинна жити в творці дій. (З асинхронними читаннями можна керувати по-різному .) На мій досвід, це має декілька переваг за важливістю:

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

2. Усі розсилки дій відбуваються від творців дій. Якщо ви обробляєте асинхронні операції у ваших магазинах, і хочете підтримувати обробники дій ваших магазинів синхронними (і вам слід для того, щоб отримати гарантії одноразового відправлення), вашим магазинам потрібно буде запустити додаткові дії УСПІХУВАННЯ та НЕПРАВИ у відповідь на асинхронні дії обробка. Введення цих відправлень у творці дій замість цього допомагає розділити завдання творців та магазини; Крім того, вам не доведеться копати логіку магазину, щоб зрозуміти, звідки надсилаються дії. Типова асинхронна дія в цьому випадку може виглядати приблизно так (змінити синтаксис dispatchвикликів на основі аромату потоку, який ви використовуєте):

   someActionCreator: function(userId) {
     // Dispatch an action now so that stores that want
     // to optimistically update their state can do so.
     dispatch("SOME_ACTION", {userId: userId});
   
     // This example uses promises, but you can use Node-style
     // callbacks or whatever you want for error handling.
     SomeDataAccessLayer.doSomething(userId)
     .then(function(newData) {
       // Stores that optimistically updated may not do anything
       // with a "SUCCESS" action, but you might e.g. stop showing
       // a loading indicator, etc.
       dispatch("SOME_ACTION_SUCCESS", {userId: userId, newData: newData});
     }, function(error) {
       // Stores can roll back by watching for the error case.
       dispatch("SOME_ACTION_FAIL", {userId: userId, error: error});
     });
   }
   

   Логіку, яка в іншому випадку може дублюватися через різні дії, слід витягувати в окремий модуль; у цьому прикладі був би той модуль SomeDataAccessLayer, який обробляє виконання фактичного запиту Ajax.

3. Вам потрібно менше творців дій. Це менш велика справа, але приємно мати. Як згадується у №2, якщо у ваших магазинах є синхронна робота з відправленням (і вони повинні), вам потрібно буде запустити додаткові дії для обробки результатів асинхронних операцій. Виконання розсилань у творцях дій означає, що один творець дії може відправляти всі три типи дій, обробляючи результат самого асинхронного доступу до даних.

Я написав це питання дияволам у Facebook, і я отримав відповідь від Білла Фішера:

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

Але коли у вас є тикер або інший нелюдський водій, дзвінок з магазину працює краще.

Важливо - створити дію в зворотному / виклику помилок / успіх, тому дані завжди походять із дій

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

У кожному застосуванні Flux, що я бачив, дії - це в основному рядки подій, перетворені на об'єкти, як, наприклад, традиційно у вас буде подія під назвою "прив’язка: натиснута", але в Flux вона буде визначена як AnchorActions.Clicked. Вони навіть настільки "німі", що більшість реалізацій мають окремі об'єкти Dispatcher, щоб фактично відправляти події до магазинів, які слухають.

Особисто мені подобається реалізація Flux від Reflux, коли немає окремих диспетчерських об'єктів, а об'єкти Action виконують диспетчеризацію самостійно.

редагувати: Flux Facebook фактично потрапляє до "творців дій", тому вони використовують розумні дії. Вони також готують корисне навантаження, використовуючи магазини:

https://github.com/facebook/flux/blob/19a24975462234ddc583ad740354e115c20b881d/examples/flux-chat/js/action/ChatMessageActionCreators.js#L27 (рядок 27 та 28)

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

https://github.com/facebook/flux/blob/19a24975462234ddc583ad740354e115c20b881d/examples/flux-chat/js/utils/ChatWebAPIUtils.js#L51

Тож я гадаю, що це краще рішення.

Я надам аргумент на користь "німих" дій.

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

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

Це піддається більш численним, але меншим, більш спеціалізованим магазинам. Я аргументую цей стиль тому, що

• це дає вам більше гнучкості в тому, як представлення споживають дані магазину
• "розумні" магазини, спеціалізовані для представлень, які споживають їх, будуть меншими та менш зв'язаними для складних додатків, ніж "розумні" дії, від яких залежить багато переглядів

Метою магазину є надання даних переглядам. Назва "Дія" підказує мені, що її мета - описати зміну моєї Заявки.

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

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

За допомогою "тупих" дій ви можете додати новий магазин, щоб новий віджет споживав, і налаштувати його так, що коли він отримає тип дії "оновити інформаційну панель", він надсилає запит на нові дані та відкриває їх новий віджет, коли він буде готовий. Для мене є сенс, що коли шару перегляду потрібні більші чи інші дані, те, що я змінюю, є джерелами цих даних: Магазини.

Демонстратор маршрутизатора gaeron- flux- react -демонструє корисну варіацію «правильного» підходу.

ActionCreator генерує обіцянку від зовнішньої служби API, а потім передає обіцянку та три константи дії dispatchAsyncфункції у проксі / розширеному диспетчері. dispatchAsyncзавжди передаватиме першу дію, наприклад, "GET_EXTERNAL_DATA", і коли обіцянка повернеться, вона буде відправлена ​​або "GET_EXTERNAL_DATA_SUCCESS", або "GET_EXTERNAL_DATA_ERROR".

Якщо ви хочете, щоб в один день було середовище розробки, порівнянне з тим, що ви бачите у відомому відео Брет Віктора « Винахід на принцип» , скоріше скористайтеся тупими сховищами, які є лише проекцією дій / подій всередині структури даних без жодних побічних ефектів. Це також допоможе, якби ваші магазини насправді були членами тієї самої глобальної незмінної структури даних, як у Redux .

Більше пояснень тут: https://stackoverflow.com/a/31388262/82609