Недавно во время собеседования меня спросили, как работает 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](https://api.falbar.one/storage/images/60e/1bf/301/bsbbb4ewy-redux-initial-state.png)
Действия и диспатчи
Теперь нам нужно войти в магазин, чтобы купить еды. В Redux каждое действие способно изменить исходное состояние. Это значит, что любое ваше действие изменяет ваше окружение.
Когда происходит действие, говорят, что происходит его диспетчеризация.
![redux-actions](https://api.falbar.one/storage/images/60e/1bf/301/w93lv5tts-redux-actions.png)
Восстановители
Теперь у нас есть действия, которые позволяют войти в магазин и взаимодействовать с ним. Нам также нужно что-то, что будет интерпретировать эти действия.
Эту роль будут выполнять восстановители.
Восстановители принимают аргумент состояния, которому присвоено значение исходного состояния, и само действие. Оно помогает восстановителю определить, что необходимо сделать с состоянием.
![redux-reducer](https://api.falbar.one/storage/images/60e/1bf/301/e0rdmqit0-redux-reducer.png)
Хранилище
У нас есть список действий и восстановитель, который управляет ими. Другими словами, теперь мы можем полноценно взаимодействовать с магазином, оказавшись внутри него. Однако нужно еще кое-что – хранилище. В нем хранится состояние. Чтобы создать хранилище, нужны восстановитель и исходное состояние.
![redux-store](https://api.falbar.one/storage/images/60e/1bf/301/kzosrenjk-redux-store.png)
Теперь вы можете в любой момент взять объект из хранилища, используя store.getState()
. Пройдемся по всем действиям и диспатчам.
![redux-using-storegetstate](https://api.falbar.one/storage/images/60e/1bf/301/prz59x6xe-redux-using-storegetstate.png)
Подписки
Можно подписаться на хранилище, чтобы следить за изменениями или обновлениями. Эта функция может быть полезна, так она активно ищет отправленные действия, которые потенциально могут изменить состояние.
![redux-subscriptions](https://api.falbar.one/storage/images/60e/1bf/301/xmqujwrza-redux-subscriptions.png)
В примере выше настроение кошки из магазина остается нейтральным. Тем временем первый console.log
будет возвращаться до тех пор, пока не будет отправлено действие PET_BODEGA_CAT.
Применение Redux в приложении списка дел
Теперь мы понимаем основы работы Redux: происходит диспетчеризация действий к восстановителям, которые меняют исходное состояние в хранилище. Можем применить эти знания в приложении в виде списка дел.
Исходное состояние
Для начала нужно поместить все дела в список. Мы используем массив.
![redux-initial-state-2](https://api.falbar.one/storage/images/60e/1bf/301/qj8np4q3b-redux-initial-state-2.png)
Действия и диспатчи
Далее нужно действие, которое будет отправлено к восстановителю. Данный процесс немного отличается от того, что мы делали ранее, так как в этот раз мы используем динамическое значение. Другими словами, мы берем значение из поля ввода, которое находится на форме нашего списка. В этом случае действие должно уметь принимать аргументы.
![redux-actiondispatch](https://api.falbar.one/storage/images/60e/1bf/301/4qmtrxbfx-redux-actiondispatch.png)
Восстановители
Теперь нам понадобится восстановитель, который сможет определить, что нужно сделать с действием!
![redux-reducer-handles-an-action-thats-dispatched-and-alters-the-state](https://api.falbar.one/storage/images/60e/1bf/301/hvjcmd0i3-redux-reducer-handles-an-action-thats-dispatched-and-alters-the-state.png)
Выше было вызвано действие ADD_TODO. Как только оно достигнет восстановителя, он определит, что оно подходит оператору ADD_TODO. Далее он заберет строковое значение из action.toDo
и добавит его в массив toDos
.
![to-do-app-walk-through-with-redux](https://api.falbar.one/storage/images/60e/1bf/301/p4xgpxalk-to-do-app-walk-through-with-redux.png)
- Поле ввода заполняется текстом «Купить еды»;
- Данные собираются, когда нажимается кнопка «Отправить»;
- Данные передаются в действие, которое отправляется восстановителю;
- Восстановитель читает действие и определяет, что делать со значением;
- Восстановитель добавляет текст в массив toDos в исходном состоянии;
- Состояние возвращается.