React, Redux и рабочий процесс
При принятии решения о создании приложения важно учитывать, какой фреймворк лучше всего соответствует вашим целям. Если вы изучили свои варианты и пришли к выводу, что React.js — ваш лучший выбор, тогда вам остается принять дополнительное решение. Какую модельную структуру вы будете использовать для дополнения своих представлений React?
Недавно я создал приложение на React и Redux и обнаружил, что это очень эффективный инструмент для моих конкретных целей. Документацию по редуксу очень легко читать, и, к счастью, в Интернете есть множество советов о том, как именно собирать с этим соединением. Решив погрузиться в этот стек, вы должны помнить один ключевой момент. Рабочий процесс для React и Redux является однонаправленным.
Важным аспектом компонентов React является их состояние. Это легко непонятная сложность использования Redux с React. При соединении с Redux есть два очень похожих представления. Один — это компонент React, а другой — контейнер Redux. Контейнеры служат той же цели, что и компоненты, за исключением того, что они обеспечивают доступ к однонаправленным операциям потока Action, Reducer, Container, который существует в Redux. Идея «государства» принимает здесь две формы. Потому что состояние React — это то, что сразу доступно и отображается из компонента. Всякий раз, когда происходят изменения в состоянии, представление перерисовывается. Это очень полезно, когда нужно сделать вид видимым или нет. Однако при чтении документации по редуксу вы можете найти другую ссылку на состояние. Это «состояние» представляет хранилище или набор состояний избыточности, которые передаются контейнерам для рендеринга в DOM.
Чтобы упростить этот процесс, я рекомендую начинать с начала цепочки. Все изменения инициируются действиями. Действие может быть чем угодно, от выбора элемента до запроса API. После запуска действия результаты этого действия сохраняются в редюсере. Редюсеры захватывают результаты действия и помогают сделать результаты этого действия доступными в пространстве контейнера. Эта взаимосвязанность исходит из соответствующей цепочки через импорт (в ES6). Для каждого шага необходимо импортировать экспортированное действие последующих шагов. При использовании Redux у вас также будет центральная коллекция всех редьюсеров, которая имеет доступ ко всем действиям и редьюсерам. Это скомпилированный файл редукторов. Он связывает действие с редюсерами и указывает имя объекта результатов или массива, который теперь можно импортировать в контейнер.
В контейнерах вы должны изменять состояние только с помощью действий. Таким образом, вы можете поддерживать однонаправленный рабочий процесс, который разработан для комбинации React/Redux. Я обнаружил, что при попытке напрямую изменить состояние можно столкнуться с несколькими неожиданными проблемами. Возможно, вы слышали некоторые упоминания об изменении состояния. Это пример того. В качестве альтернативы вы можете напрямую изменить состояние компонента React. Для любого, кто является разработчиком Angular, это противоположно двусторонней привязке данных. Циклический характер этого процесса позволяет фиксировать каждое состояние как его визуализацию и открывает дверь для легкого доступа к предыдущим состояниям.
Я надеюсь, что этот пост поможет немного объяснить рабочий процесс между React и Redux. К счастью для всех нас, документация для обоих фреймворков довольно проста для понимания и содержит множество примеров и четких объяснений важных концепций. Я включил ссылки на оба ниже для вашего удобства. Удачного кодирования.
