Если вы относительно новичок в JavaScript, скорее всего, вы встречали упоминания о Redux. Что именно? Что ж, чтобы начать изучение Redux, не менее важно иметь представление о React, поскольку Redux используется в тандеме для управления состоянием приложения.

Что такое React?

Если вы ранее не работали с React, React - это JavaScript-фреймворк, который помогает в организации и структуре приложения. В частности, он позволяет пользователю разбить приложение на разделы, называемые компонентами. Ранее я подробно рассказывал о компонентах в предыдущем сообщении в блоге, поэтому здесь я не буду вдаваться в подробности. Но TL; DR: компоненты - это небольшие фрагменты кода, написанные независимо, которые в совокупности создают рабочее приложение, упрощающее управление.

React имеет множество интересных дополнительных функций, таких как виртуальная модель DOM, Babel (транспилятор), Webpack (сборщик) и другие.

При работе с React у компонентов есть свойства и состояние. Свойства или свойства - это переменные, содержащие данные об объекте, которые могут передаваться различным компонентам. Свойства могут быть переданы только родительскому компоненту до того, как будут переданы дочернему компоненту. Они не могут быть напрямую переданы дочернему компоненту - только родительскому или дочернему компоненту.

Состояние похоже на свойства, за исключением того, что данные изменяемы. Состояние компонентов может изменяться и обновляться как часть компонента класса. Состояние не следует изменять напрямую, а обновлять с помощью setState(). Однако важно отметить, что как только вы начинаете передавать состояние различным компонентам, оно передается как свойство. Это связано с тем, что состояние компонента недоступно как состояние для других компонентов, только внутри конкретного компонента, в котором оно установлено.

Пример ниже - это компонент из приложения для найма, использующий только React, а не Redux. Как видите, этот конкретный Job компонент имеет только массив jobs в качестве состояния. Но он передает это состояние, а также множество других свойств, которые этот компонент сам получил, в JobsIndex компонент в return render.

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

Что такое Redux?

Теперь, когда у нас есть базовое представление о React, свойствах и состоянии, давайте немного углубимся в Redux. Одним из самых фундаментальных преимуществ использования Redux является помощь в управлении состоянием для более крупных приложений. Вместо того, чтобы передавать все ваши состояния / свойства компонентов, состояние хранится в отдельном месте - метко названном store. Если вы ранее искали Redux или наткнулись на него, скорее всего, вы видели изображение ниже:

Это визуальное представление передачи состояния / свойств с помощью React vs Redux. Когда Redux и состояние хранятся в хранилище, все компоненты могут делать запросы в хранилище и получать доступ к состоянию без необходимости проходить через родительские компоненты.

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

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

Короче говоря, хранилище Redux хранит все состояние приложения. Любые изменения, которые вы хотите внести в это состояние, должны быть указаны в действии. Действия определяют инструкции для редуктора о том, что следует обновить. Затем редуктор принимает эти инструкции, извлекает предыдущее состояние из хранилища и обновляет его в соответствии с действием. Затем это обновленное состояние отправляется в магазин и доступно для компонентов.

Давайте посмотрим на это на примере. В общем, этот проект представляет собой социальную платформу, которая позволяет пользователям создавать группы, приглашать участников, создавать сообщения и загружать медиа. Конкретный фрагмент ниже - это GroupCard или компонент, который отображается на домашней странице пользователя каждой группы, членом которой является пользователь. При нажатии он переходит на страницу группы, содержащую все сообщения и мультимедиа.

Это компонент, одновременно получающий доступ к состоянию из магазина и отправляющий действие. Функция mapState разрешает компоненту доступ к состоянию для информации group, user и user_group. Функция mapDispatch принимает данные event.target в событии щелчка, чтобы отправить эту информацию действию.

В этом проекте у меня есть папки, разделяющие компоненты, действия и редукторы для каждого аспекта. В этих примерах используются файлы сообщений и групповых действий. Данные groupId отправляются в соответствующие действия (getPost и getSingleGroup), где они извлекают сообщения и группируют данные, относящиеся к этому идентификатору. Затем действия отправляются редуктору - в частности, FETCH_POSTS и FETCH_SINGLE_GROUP с соответствующими данными.

В приведенном выше примере используется функция группового редуктора, и вы можете видеть, как наше предыдущее отправленное действие FETCH_SINGLE_GROUP импортируется из “../actions/groupActions”. Вы можете увидеть случай для каждого типа действия и состояние, которое затем будет обновлено и доступно в магазине.

Что следует использовать?

Как в React, так и в Redux есть много функций, и мой блог только поверхностно. Обычно мое решение о том, что использовать, зависит от размера приложения. Как упоминалось ранее, некоторые приложения достигают точки, когда состояние / свойства в React становятся скорее помехой, чем помощью. Здесь я начинаю рассматривать Redux. Но почему бы всегда не использовать Redux? Честно говоря, установка приложения Redux может потребовать много работы. Что для небольшого приложения обычно кажется ненужным.

Я бы посоветовал использовать и то, и другое, и по мере того, как вы ближе познакомитесь с процессом передачи состояния / реквизита вручную в React, а также с управлением магазином с помощью Redux, вы начнете понимать, что было бы идеальным. Как всегда, спасибо за чтение и удачного кодирования!