О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Как работает Redux?
  • Инструменты
  • Заработок
  • Раскрутка
04 июля 2021 . Андрей Чернышов

Как работает Redux?

Недавно во время собеседования меня спросили, как работает Redux (что это такое будет рассказано ниже) в простом приложении списка дел. Мне нужно было рассказать, что произойдет в тот момент, когда будет заполнено поле ввода и нажата кнопка отправки. Ситуацию усложнило то, что передо мной не было компьютера. У меня была лишь ручка, которую мне дал проводящий собеседования, и оборотная сторона моего резюме.

Держа ручку в руке, я несколько секунд просто сидел и думал о поставленной задаче.

У меня такое уже бывало: паника и тревога во время технической части собеседования. К счастью, я уже проваливал технические собеседования, так что все было не так плохо.

Суть в том, что участие в собеседовании – это навык. Чтобы собеседования получались лучше, нужно провалиться в них несколько раз. Тогда вы осознаете свои слабости и сможете шагнуть вперед. Поэтому мне и нравится писать о том, с чем я сталкиваюсь на собеседованиях. Написание статей о них позволяет мне тщательно анализировать ситуацию и становиться лучше. Это я рекомендую всем.

Учиться нужно всегда.

Что такое Redux?

Документация поможет ответить на вопрос:

«Redux – предсказуемый контейнер состояний для JavaScript приложений (не путать с одноименным фреймворком для WordPress – Redux Framework).
Он помогает создавать приложения, которые всегда ведут себя одинаково, работают в разных средах (клиент, сервер, нативная среда) и легко тестируются. Кроме того, он предоставляет возможность: редактировать код в режиме реального времени и использовать отладчик.
Redux можно использовать вместе с React или с любой другой библиотекой. Он легковесный (2кб, включая зависимости).

Вкратце, Redux позволяет управлять состояниями веб-приложений, созданных при помощи любого Javascript-фреймворка: например, React, Meteor, Angular.

Redux произошел из идеи Flux – архитектурного шаблона, разработанного инженерами Facebook.

Что особенного в Redux?

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

Это очень полезно, так как он упрощает масштабирование и позволяет быстро диагностировать затруднения, асинхронные проблемы или ошибки.

Как работает Redux?

Чтобы понять, Redux – что это, нужно разобраться с основными концепциями. Это Store (Хранилище), Actions (Действия), Subscriptions (Подписчики) и Reducers (Восстановители).

Исходное состояние

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

Представьте себе полки в продуктовом магазине. Что на них можно увидеть? Консервы, фрукты, хлеб, молоко, даже живую кошку.

redux-initial-state

Действия и диспатчи

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

Когда происходит действие, говорят, что происходит его диспетчеризация.

redux-actions

Восстановители

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

Эту роль будут выполнять восстановители.

Восстановители принимают аргумент состояния, которому присвоено значение исходного состояния, и само действие. Оно помогает восстановителю определить, что необходимо сделать с состоянием.

redux-reducer

Хранилище

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

redux-store

Теперь вы можете в любой момент взять объект из хранилища, используя store.getState(). Пройдемся по всем действиям и диспатчам.

redux-using-storegetstate

Подписки

Можно подписаться на хранилище, чтобы следить за изменениями или обновлениями. Эта функция может быть полезна, так она активно ищет отправленные действия, которые потенциально могут изменить состояние.

redux-subscriptions

В примере выше настроение кошки из магазина остается нейтральным. Тем временем первый console.log будет возвращаться до тех пор, пока не будет отправлено действие PET_BODEGA_CAT.

Применение Redux в приложении списка дел

Теперь мы понимаем основы работы Redux: происходит диспетчеризация действий к восстановителям, которые меняют исходное состояние в хранилище. Можем применить эти знания в приложении в виде списка дел.

Исходное состояние

Для начала нужно поместить все дела в список. Мы используем массив.

redux-initial-state-2

Действия и диспатчи

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

redux-actiondispatch

Восстановители

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

redux-reducer-handles-an-action-thats-dispatched-and-alters-the-state

Выше было вызвано действие ADD_TODO. Как только оно достигнет восстановителя, он определит, что оно подходит оператору ADD_TODO. Далее он заберет строковое значение из action.toDo и добавит его в массив toDos.

to-do-app-walk-through-with-redux
  • Поле ввода заполняется текстом «Купить еды»;
  • Данные собираются, когда нажимается кнопка «Отправить»;
  • Данные передаются в действие, которое отправляется восстановителю;
  • Восстановитель читает действие и определяет, что делать со значением;
  • Восстановитель добавляет текст в массив toDos в исходном состоянии;
  • Состояние возвращается.
#React #Vue #Angular
6 276
Перевод
Андрей Чернышов
За кулисами системы React hooks Как использовать React в Symfony 4? Создаем мессенджер на React JS за 10 минут Сравниваем Angular и React, разбираемся в отличиях Я сделал два одинаковых приложения в React и Vue - вот в чем разница между ними
Комментарии не найдены

Миграция с PHP на Node.js

Битрикс компонент

Популярное
1 Пишем парсер контента на PHP2 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте3 Лучший способ прижать футер используя flexbox4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание
kwork