Недавно во время интервью мне представили сценарий о том, как 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 в начальном состоянии.
  • Затем состояние возвращается

📝 Прочтите этот рассказ позже в Журнале.

🗞 Просыпайтесь каждое воскресное утро и слышите самые интересные истории, мнения и новости недели, ожидающие в вашем почтовом ящике: Получите примечательный информационный бюллетень›