Loading...
Вниз

React, Redux

Redux как новый способ управления приложениями

Знакомство с Redux следует начать с контекста

1.  Контекст выполнения функции — это одно из фундаментальных понятий в JavaScript. Контекстом еще часто называют значение переменной this внутри функции. Также иногда путают понятия «контекст выполнения» и «область видимости» — это не одно и то же.

Пример: Я положил ручку на стол. Получаем множество контекстов: координаты, цвет ручки, действие (ручка была в руках, оказалась на столе) — все это  контекст. Вся полученная информация есть контекст.

2. This — это контекст, в котором выполняется функция. 

Пример: Лист бумаги с клетками представляет собой область видимости. Если мы взаимодействуем с листом бумаги — не можем за него выйти. Для доступа к информации внутри объекта метод может использовать ключевое слово this. This будет указывать на то, что мы работаем на данном листе.

3. Вызов функции. Каждый вызов функции имеет и область видимости, и переменную this, и контекст выполнения. Область видимости определяет доступ к переменным при вызове функции и является уникальной для каждого вызова. Значение переменной this — это ссылка на объект, который «вызывает» код в данный момент. Контекст выполнения содержит и область видимости, и аргументы функции, и переменную this.

 

        Что стоит знать о Redux и React?

  1. Redux — библиотека управления как состоянием данных, так и состоянием интерфейса в JavaScript-приложениях. Он подходит для одностраничных приложений, в которых управление состоянием может со временем становиться сложным. 

Redux не связан с каким-то определенным фреймворком, и хотя разрабатывался для React, может использоваться с Angular или jQuery.

 

  1. Hooks (хуки)

Хуки (Hooks) называют по-разному. Это нововведение в React, которое позволяет использовать состояние и другие возможности React без написания классов. Классы сильно усложняют жизнь разработчикам, в них используется ключевое слово this. Понять this непросто, объясним на пальцах.  

Redux выпускает свои хуки: useSelector и useDispatch. Они используются для облегчения работы в определенном приложении. 

Хуки useSelector и useDispatch позволяют в функциональном компоненте получать обновление данных. Т.к. redux изначально дает возможность создавать глобальный стор. Redux  же отвечает за данные, что есть на текущий момент.

Store — место, где хранятся данные. Стор состоит из функций так называемых reducers

Reducer решает, какие данные будут храниться в конкретной части стейта(state)и каким образом. За все изменения стейта отвечает reducer.

Reducer (редюсер) — это конструкция, хранящая стейт и данные из сервера, на основе которых мы отрисовываем приложение, обновляет  стейт.

3.UseSelector — хук, разработанный командой Redux, является альтернативой connect, помогает обратиться к части данных в store(хранилище) и их использовать.

UseSelector помогает избежать перерисовок компонентов, потерю мощностей и перезагрузку компьютера лишними отрисовками. Также помогает избежать работы с контекстом и коннектом.

Отличительные черты useSelector :

  •  производит глубокое сравнение данных
  • избавляет от лишних перерисовок

React/Redux отличия

React: 

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

 

  • Redux взаимодействует с react. 

 

  • Отличительная черта redux можно заменить другой библиотекой или работать без него, используя хуки(Hooks).

 

 

Redux: 

  • суть заключена в том, чтобы разделить бизнес-процессы, бизнес-логику и графическое отображение
  • предоставляет возможность из любого компонента обратиться к любому стору (store), используя select

Пример: если мы хотим произвести изменения стора — используем экшен(action) . Если хотим получить результат изменения стора — используем select.   

 Компоненты React

Компоненты в React можно разделить на две группы:Умные” (Smart) и “Глупые” (Dumb), но я также слышал Fat и Skinny, Stateful и Pure, Screens и Components и так далее. Все это не абсолютно тоже самое, но идея похожа.

 “Умная” компонента:

  1. оборачивает один или несколько глупых или умных компонентов
  2. хранит состояние стора и пробрасывает его, как объекты, в глупые компоненты
  3. вызывает Flux actions и обеспечивает ими глупые компоненты в виде колбэков
  4. никогда не имеют собственных стилей
  5. редко сами выдают DOM, используйте глупые компоненты для макета

“Глупые” компоненты:

  1. не зависят от остальной части приложения, например Flux actions или stores
  2. часто содержатся в this.props.children
  3. часто содержатся в this.props.children
  4. имеют свой css файл
  5. изредка имеют свой state
  6. могут использовать другие глупые компоненты

Следует помнить, что вся логика представления в умных компонентах должна выноситься в глупые.

 

Если у вас остались вопросы, задавайте в группах в наших социальных сетях!

Так же смотрите