С тех пор, как Redux был выпущен Дэном и Эндрю (большой поклонник ^ _ ^), он определенно изменил мой способ написания кода. Это открыло совершенно новую дверь в то, как мы пишем наш код, используя чистые функции, неизменяемые шаблоны, путешествия во времени (ужасно !!) и многое другое. Я предполагаю, что у вас есть предварительные знания о сокращении.
Сначала я использовал redux для создания нашего внутреннего веб-приложения CRM для своей компании. Инструмент CRM - это, конечно, немалое приложение, со временем я понял, что мой код не был таким чистым, как я думал. Исходя из фона MVC, я попытался создать что-то очень похожее с помощью Redux. Мои редукторы были чистыми функциями, которые принимали начальное состояние и возвращали обновленное состояние, которое действовало как моя модель данных (M). Действия и маршруты были похожи на мои контроллеры (C) и, конечно, компоненты реакции были моими представлениями (V).
Но в этой архитектуре был серьезный изъян. Мои действия больше не были чистыми. В моих действиях была встроена вся сложная логика. Хотя было легче отслеживать изменения с помощью типов действий, но я не смог предотвратить загрязнение своих действий. Я был одержим тем, чтобы все было простым и чистым.
Давайте погрузимся в код, чтобы понять проблему, с которой я столкнулся.
Ниже приведен пример, демонстрирующий, насколько сложным стало мое действие.
Мне было больно писать этот код, моя функция больше не была такой чистой и чистой, но я ненавижу сдаваться, мне пришлось исправить это и найти способ сохранить чистоту моего действия. Итак, после некоторых поисков я понял, что мое действие было связано с побочными эффектами. Мне нужен был способ следить за побочными эффектами, не влияя напрямую на мои действия. Наконец, я наткнулся на Observables, идеально подходящий для моей проблемы, который не только исправляет сложную обработку api, но и обрабатывает другие побочные эффекты. Давайте разберемся, что именно наблюдается.
Наблюдаемые
Это концепция реактивного программирования. Чтобы ответить, что это, процитирую прямо от самого автора.
Реактивное программирование - это программирование с использованием асинхронных потоков данных.
Реактивное программирование выходит за рамки этой статьи, поэтому я объясню это очень просто.
Изображение ниже из официального документа объясняет, что такое Observables.
Мне лично нравится визуальное представление, оно упрощает понимание.
Теперь объедините Observables с Redux, у нас есть новый Super saiyan 3 Redux Observable :)
Redux Observable
Это открыло путь к новому стилю программирования, называемому реактивным способом! Это самая сексуальная вещь, которую я когда-либо встречал. Я не буду сейчас вдаваться в подробности (возможно, в другом руководстве), я просто хотел обсудить архитектуру. Итак, давайте погрузимся в код и посмотрим, насколько красивым может быть код благодаря этому.
Редуктор остается прежним. Это помогает мне поддерживать чистоту действий и редукторов.
Как известно реактивное программирование,
Все поток!
Представьте, что все действия, происходящие в ходе приложения, представляют собой поток, как только в потоке обнаруживается событие, наблюдаемые объекты, замаскированные под эпики в нашей структуре, наблюдают за этими действиями и генерируют события. Для нас произошедшее событие имеет тип действия FETCH_DELIVERY_ADDRESS_LIST_SUCCESS.
Наш getDeliveryAddressEpic с помощью Observable ищет действие в потоке событий типа (ofType оператор в redux-observable) FETCH_DELIVERY_ADDRESS_LIST_SUCCESS. Аргумент действие $ действует как значения, предоставленные эпику из действия getDeliveryAddress для обработки побочных эффектов и, соответственно, возврата обновленного значения.
Это может показаться ошеломляющим, но если вам нужно наблюдать за кодом с точки зрения верхнего уровня, обратите внимание на простоту выполняемой операции.
Действия и редукторы чистые, побочные эффекты и грязная работа выполняются нашими эпиками, что даже делает грязную работу действительно чистой! В этом вся прелесть rxjs. Rxjs - это разные темы. Я намерен обсудить подход, который мы можем использовать для написания более чистого и управляемого кода.
Заключение
Конечно, эта статья может показаться самоуверенной, я уверен, что есть и другие способы справиться с побочными эффектами, такими как redux saga. Я надеюсь, что эта статья дала вам представление о том, как мы можем объединить концепцию Observable в Redux и сделать ваш фреймворк супер-saiyan 3: D
Пожалуйста, похлопайте, чтобы поддержать эту статью и показать ❤!
Следуйте за мной в twitter, чтобы получать больше новостей о новых статьях и быть в курсе последних событий в интерфейсе.
Некоторые полезные ссылки для начала работы
- Введение в реактивное программирование
- Официальный документ Redux
- Официальный документ Redux Observable
- Изучение Rxjs
До скорой встречи и счастливого кодирования !! ❤
