Недавно во время интервью мне представили сценарий о том, как Redux будет работать с базовым приложением To Do. Мне нужно было объяснить интервьюеру, что происходит в тот момент, когда заполняется поле ввода и нажимается кнопка отправки. Это немного усложняло то, что передо мной не было компьютера. Фактически, все, что у меня было, это ручка, которую он мне предложил, и обратная сторона моего резюме, на котором я мог писать.
С ручкой в руке я сидел там несколько секунд и думал об этом.
Я был здесь раньше - олень в свете фар технической части интервью. К счастью, я уже перебрался в первые несколько технических собеседований, так что все было не так уж и плохо.
Реальность такова, что собеседование - это навык, и единственный способ улучшить его - это потерпеть неудачу, чтобы вы могли распознать свои слабости в будущем. Вот почему я люблю писать о том, о чем меня спрашивают на собеседовании. Это заставляет меня глубоко нырять и поправляться. Я всем рекомендую это делать.
Всегда продолжайте учиться.
Во-первых, что такое Redux?
Как описано в фактических документах Redux:
Redux - это контейнер с предсказуемым состоянием для приложений JavaScript. (Не путать с фреймворком WordPress - Redux Framework.)
Он помогает вам писать приложения, которые ведут себя согласованно, работают в разных средах (клиентских, серверных и собственных) и легко тестируются. Вдобавок ко всему, он обеспечивает отличные возможности разработчика, такие как редактирование кода в реальном времени в сочетании с отладчиком, путешествующим во времени.
Вы можете использовать Redux вместе с React или с любой другой библиотекой представлений. Он крошечный (2кБ, включая зависимости).
Короче говоря, Redux позволяет вам управлять состоянием ваших веб-приложений, созданных на любой платформе JavaScript, такой как React, Meteor или Angular.
Redux развился из идеи Flux - архитектурного шаблона, созданного инженерами Facebook.
Что делает Redux таким особенным?
Короче говоря, Redux предоставляет вам один объект, который хранит состояние всего вашего приложения в одном месте - который может включать данные из вашего внутреннего API или внешнего API, состояние для навигации, информацию о пользователе, переключенное состояние кнопки и т. Д. на.
Это мощный инструмент, поскольку он обеспечивает более простую масштабируемость и возможность быстро диагностировать узкие места, асинхронные проблемы или ошибки.
Как это работает?
Основные концепции Redux - Магазин, Действия, Редукторы и Подписки.
Начальное состояние
Исходное состояние - это то, как оно выглядит в начале.
Подумайте о полках продуктового магазина, идя по проходам - что вы видите? Есть консервы, фрукты, хлеб, молоко и - если вы живете в Нью-Йорке - винный погреб.
Действия / Отправки
Затем нам нужно войти в винный погреб, чтобы купить еды. С Redux каждое действие может изменить начальное состояние - это означает, что все, что вы делаете, может что-то изменить вокруг вас.
Каждый раз, когда происходит действие, оно называется отправкой.
Редукторы
Теперь у нас есть действия, которые могут позволить нам войти в магазин и взаимодействовать с ним, но теперь нам нужно что-то, что может интерпретировать эти действия.
Вот что такое редукторы.
Редукторы принимают аргумент состояния, установленного в начальное состояние по умолчанию, и действие. Это действие помогает редуктору определить, что нужно сделать с состоянием.
Магазин
У нас есть список действий и редуктор, который может обрабатывать наши действия. Другими словами, теперь мы можем полностью взаимодействовать с винным погребом, оказавшись внутри него. Однако нам нужен последний шаг - наш Магазин. Вот где содержится состояние. Для его создания вам понадобится редюсер и начальное состояние.
Теперь вы можете получить объект Bodega из магазина в любой момент с помощью store.getState (). Давайте сделаем это, просматривая каждое действие / отправку:
Подпишитесь
Вы также можете подписаться на магазин для любых изменений или обновлений. Это может быть очень полезно, поскольку оно активно прослушивает любые отправляемые действия, которые потенциально могут изменить состояние.
В приведенном выше примере, хотя настроение кота из винного погреба остается нейтральным, первый console.log будет возвращаться до тех пор, пока не будет отправлено действие PET_BODEGA_CAT.
Применение его к приложению To Do
Итак, теперь, когда у нас есть базовое понимание того, как работает Redux - действия отправляются редукторам, которые изменяют начальное состояние в хранилище - мы можем применить их к приложению To Do.
Начальное состояние
Во-первых, нам нужно место для хранения всех дел из нашего списка. Мы будем использовать массив:
Действия / Отправки
Далее нам нужно действие для отправки в редуктор. Это немного отличается от того, что мы делали выше, потому что на этот раз мы берем динамическое значение. Другими словами, мы получаем значение из поля ввода, которое отправляется в форме в наш список. В этом случае наше действие должно иметь возможность принимать аргументы:
Редукторы
Теперь нам нужен редуктор, чтобы определять, что делать с этим действием!
В приведенном выше примере вызывается действие ADD_TODO. Как только он попадает в редуктор, редуктор определяет, что он соответствует случаю ADD_TODO, а затем принимает значение из action.toDo (которое является строкой) и добавляет его в массив toDos:
- Поле ввода заполнено текстом «Купить еду».
- Эти данные собираются при нажатии кнопки «Отправить».
- Затем данные передаются в действие, которое отправляется редуктору.
- Редуктор считывает действие и определяет, что делать со значением.
- Редуктор добавляет его в массив toDos в начальном состоянии.
- Затем состояние возвращается
📝 Прочтите этот рассказ позже в Журнале.
🗞 Просыпайтесь каждое воскресное утро и слышите самые интересные истории, мнения и новости недели, ожидающие в вашем почтовом ящике: Получите примечательный информационный бюллетень›