Недавно во время собеседования меня спросили, как работает 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 каждое действие способно изменить исходное состояние. Это значит, что любое ваше действие изменяет ваше окружение.
Когда происходит действие, говорят, что происходит его диспетчеризация.
Восстановители
Теперь у нас есть действия, которые позволяют войти в магазин и взаимодействовать с ним. Нам также нужно что-то, что будет интерпретировать эти действия.
Эту роль будут выполнять восстановители.
Восстановители принимают аргумент состояния, которому присвоено значение исходного состояния, и само действие. Оно помогает восстановителю определить, что необходимо сделать с состоянием.
Хранилище
У нас есть список действий и восстановитель, который управляет ими. Другими словами, теперь мы можем полноценно взаимодействовать с магазином, оказавшись внутри него. Однако нужно еще кое-что – хранилище. В нем хранится состояние. Чтобы создать хранилище, нужны восстановитель и исходное состояние.
Теперь вы можете в любой момент взять объект из хранилища, используя store.getState(). Пройдемся по всем действиям и диспатчам.
Подписки
Можно подписаться на хранилище, чтобы следить за изменениями или обновлениями. Эта функция может быть полезна, так она активно ищет отправленные действия, которые потенциально могут изменить состояние.
В примере выше настроение кошки из магазина остается нейтральным. Тем временем первый console.log будет возвращаться до тех пор, пока не будет отправлено действие PET_BODEGA_CAT.
Применение Redux в приложении списка дел
Теперь мы понимаем основы работы Redux: происходит диспетчеризация действий к восстановителям, которые меняют исходное состояние в хранилище. Можем применить эти знания в приложении в виде списка дел.
Исходное состояние
Для начала нужно поместить все дела в список. Мы используем массив.
Действия и диспатчи
Далее нужно действие, которое будет отправлено к восстановителю. Данный процесс немного отличается от того, что мы делали ранее, так как в этот раз мы используем динамическое значение. Другими словами, мы берем значение из поля ввода, которое находится на форме нашего списка. В этом случае действие должно уметь принимать аргументы.
Восстановители
Теперь нам понадобится восстановитель, который сможет определить, что нужно сделать с действием!
Выше было вызвано действие ADD_TODO. Как только оно достигнет восстановителя, он определит, что оно подходит оператору ADD_TODO. Далее он заберет строковое значение из action.toDo и добавит его в массив toDos.
- Поле ввода заполняется текстом «Купить еды»;
- Данные собираются, когда нажимается кнопка «Отправить»;
- Данные передаются в действие, которое отправляется восстановителю;
- Восстановитель читает действие и определяет, что делать со значением;
- Восстановитель добавляет текст в массив toDos в исходном состоянии;
- Состояние возвращается.