Соединение Redux с вашим приложением Angular 2 может принести больше пользы, чем вы думали. Предоставляя богатый набор функций и предсказуемое поведение приложения, добавление Redux в ваше приложение обеспечит понимание и рабочий процесс, которые вы так долго искали.

Что такое Redux

Redux - это контейнер с предсказуемым состоянием для приложений JavaScript. Он помогает вам писать приложения, которые ведут себя согласованно, работают в разных средах (клиентских, серверных и собственных) и легко тестируются . ( http://redux.js.org/ )

Это обширная тема, и ее нельзя здесь полностью осветить. Однако общая идея состоит в том, чтобы сохранить состояние всего вашего приложения в дереве объектов. Дерево объектов сохраняется в объекте-контейнере, называемом хранилищем. Состояние фиксируется с помощью Redux, когда действие выполняется через компонент Angular. Показанный ниже шаблон жизненного цикла предлагает предсказуемое поведение для всего приложения независимо от размера.

Каждое изменение состояния приложения фиксируется как действие и отправляется в магазин для записи. Вы можете узнать больше о каждом предмете и о его функциях здесь.

Регистрация изменений состояния в вашем приложении может дать возможность проанализировать и уточнить многие аспекты вашего приложения, от UX до повышения логической эффективности. Состояние приложения можно использовать для быстрого выявления узких мест, позволяя выявить плохое взаимодействие с пользователем на ранних этапах процесса разработки. Это означает, что после того, как ваше приложение будет развернуто для тестирования, вы сможете уделять больше времени блестящему новому набору функций, который внезапно стал новым требованием проекта. Вот несколько примеров того, что может предложить Redux.

UX Insight

Когда пользователь перемещается по приложению, использующему Redux, мы можем фиксировать изменение состояния маршрутизатора. Это позволит нам визуализировать пользовательскую навигацию. Мы можем определить конкретные рабочие процессы, которые можно было бы определить более четко. Новые инструменты, такие как Redux VCR, позволяют отслеживать / записывать сеанс пользователя с помощью Redux store взаимодействий в реальном времени. С точки зрения UX, возможность контролировать пользователя и наблюдать, как он проходит через сложные взаимодействия с приложением, может быть неоценимой.

Выше вы можете увидеть изменения состояния приложения, проигранные как в кино, с использованием отладки путешествия во времени. Также обратите внимание, что каждое действие, предпринимаемое пользователем, отображается в консоли, видимой в правом нижнем углу.

На изображении выше показано дерево состояний приложения, отображаемое с помощью инструмента отладки Redux. Он использовался для примера приложения Angular 2 / NG2-Redux, которое я собрал. Вы быстро получите обзор структуры моего примера приложения, не просматривая приложение. Мое состояние на данный момент содержит только пару модулей: клиентов, маршрутизатор и сеанс. С помощью пары щелчков мышью я могу перейти к различным модулям и увидеть структуры данных и ассоциации.

Анализ отладки

Используя Пакет средств разработки Redux, вы можете видеть действия, которые были выполнены над состоянием приложения, в последовательном порядке. Когда действие отправлено, Redux захватывает и отображает предыдущее состояние приложения, выполненное действие и следующее состояние приложения. Продвигаясь вперед или назад по состоянию, вы убедитесь, что ваше действие правильно влияет на пользовательский интерфейс. Это упрощает отладку. Избавление разработчика от заполнения форм тысячи раз, чтобы гарантировать, что правильный переход между состояниями прошел успешно.

Какая интеграция будет выглядеть в вашем приложении Angular 2

Если вы хотите увидеть полный пример, вы можете проверить проект, использованный для этой статьи, по ссылке в разделе ресурсов ниже.

Необходим ли Redux?

Если вы создаете небольшое приложение, интеграция Redux в приложение Angular 2 может не иметь смысла. Причины отказа от использования Redux лучше всего объясняет сам автор Redux Дэн Абрамов. Полезную статью на эту тему можно найти здесь.

Если вы создаете приложение с большим объемом данных. Я настоятельно рекомендую ознакомиться с тем, что Redux может добавить в ваше приложение.

Начало работы

Вот несколько отличных ресурсов, которые вы можете использовать.

  1. Https://github.com/angular-redux/ng2-redux - Ng2Redux позволяет легко соединять компоненты Angular 2 с Redux, при этом соблюдая идиому Angular 2.
  2. Https://github.com/newmanbrad/ng2-redux-example - Пример сборки приложения с использованием Ng2Redux, показанный на изображениях выше.
  3. Https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en - инструменты разработчика Redux для Chrome.