От AngularJS до Flux - The React Way

Ответ 1

Я позволю другим сделать сравнение/контраст с Angular, но вот некоторые ответы на два из ваших вопросов.

Так разве это не MVC с другим именем?

Наличие в потоке разделения проблем между уровнем данных/логики и уровнем представления не делает его MVC. Многие другие модели имеют аналогичный раскол, в первую очередь CQRS, возможно, ближайший кузен Flux. В Flux нет контроллера в смысле MVC. Действия и диспетчер не соответствуют контроллеру. Представления Controller близки, но на самом деле они довольно ограничены в плане, подобном контроллеру. Главное отличие состоит в том, что контроллеры MVC содержат логику приложения и действуют на модели. Flux хранит, напротив, всю логику приложения и не имеет настроек.

Как я оставлю юниверс Angular и перейду на Flux, каковы ключевые вещи, на которые мне нужно обратить внимание?

Основные значения Flux:

• Простота по сложности.
• Ментальная модель программиста по крайней мере так же важна, как и сам код.
• Части приложения должны быть сильно развязаны и "знать" как можно меньше о других частях, насколько это возможно.
• Инверсия управления: все элементы управления должны находиться в хранилищах, где управляется состояние. Магазины не действуют, а скорее информируются о действиях.
• Приложения должны оставаться эластичными и гибкими по мере их роста, что позволяет быстрее и легче разрабатывать новые неожиданные функции.

Ключевые понятия в Flux:

• Однонаправленный поток данных: Действие → Диспетчер → Магазины → Виды
  • Каждое изменение состояния и всех новых данных начинается с отправленного действия.
  • Этот четырехступенчатый поток данных является основной ментальной моделью для программиста Flux.
• Отправка приводит к преобразованию состояния приложения в приложение.
  • Это момент времени, создающий моментальный снимок изменений. Об этом легко рассуждать.
  • Мы не можем отправлять во время отправки и сохранять эту простоту. Таким образом, любое изменение результата должно быть вызвано исходным действием.
• Флюсовые магазины - это модели домена, а не модели ORM. Они содержат всю логику и управляют всем состоянием для определенного логического домена внутри приложения. Они могут содержать коллекции, особые значения или комбинацию обоих.
• Flux предполагает, что производные данные, когда одно хранилище зависит от изменений в другом магазине, - это вероятность в сложных приложениях, где модели или магазины управляют нормализованными данными. Чтобы справиться с этим, диспетчер Flux должен предоставить механизм для декларативного управления этой зависимостью в хранилище. В диспетчере Facebook это делается с помощью метода waitFor(). Это позволяет одному магазину ждать другого ответа магазина на действие, прежде чем двигаться вперед со своим собственным ответом.

Основные части приложения Flux:

• Действия: литерал объекта, содержащий новые данные и определенный тип, позволяя магазинам различать, относится ли это к их домену.
• Диспетчер: реестр обратных вызовов, которые посредством обратных вызовов, распределяет полезную нагрузку (действие) регистраторам (магазины). У него нет собственного интеллекта. Вся разведка находится в Магазинах.
• Магазины: модель домена, которая регистрируется с Диспетчером и испускает событие "изменения" всякий раз, когда происходит изменение его состояния.
• Представления контроллера: просмотр компонентов рядом с корнем дерева компонентов. Они слушают события "изменения" в магазинах и реагируют на это событие, получая новые данные через хранилище, открыв методы геттера и передавая их своим детям. Единственное отличие между представлениями Controller и Views - это функция прослушивания.
• Представления: дочерние элементы без состояния в компонентах контроллера, получающие и передающие данные, подобно чистым функциям. Представления и контрольные представления чаще всего реализуются с помощью React, поскольку он обеспечивает возможность повторной визуализации по своему усмотрению с очень небольшой потерей производительности.
• Utils: библиотеки чистых функций, которые могут быть легко доступны для разных модулей.

Обзор по глубине: http://facebook.github.io/flux/docs/overview.html

Учебник: http://facebook.github.io/flux/docs/todo-list.html

Примеры: https://github.com/facebook/flux/tree/master/examples

Действия и диспетчер: http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html

Тестирование: http://facebook.github.io/react/blog/2014/09/24/testing-flux-applications.html

Больше в дикой природе: http://facebook.github.io/react/blog/2014/10/17/community-roundup-23.html