Автор оригинала: FreeCodeCamp Community Member.
Бхуван Малик
Давайте начнем, получив основное представление о том, что «реактивное программирование»:
Реактивный эффект Или RX является самым популярным API для реактивного программирования. Он построен на идеологии наблюдаемой модели, шаблона итератора и функционального программирования. RX имеет библиотеки для разных языков, но мы будем использовать RXJS Отказ
RX основан на наблюдаемых, наблюдателях и операторах
Наблюдатель по существу Подписки к наблюдаемой.
Затем наблюдаемый испускает потоки данных, которые наблюдатель слушает и реагирует на, нанесение в движение цепочку операций на потоке данных. Настоящая сила происходит от операторов или «реактивных расширений» (следовательно, термин RX) Отказ
Операторы позволяют трансформироваться, объединять, манипулировать и работать с последовательностями элементов, испускаемых наблюдателями.
Если вы не знакомы с RX, у вас может быть трудное понимание и использование Redux-наблюдаемый Отказ Поэтому я предлагаю, чтобы вы были грязные руки с RX в первую очередь!
Теперь на использование RXJS с Redux.
Redux-наблюдаемый
Redux-наблюдаемый – это промежуточное программное обеспечение на основе RXJS для Redux
Это то, что документы Redux должны сказать о промежуточном программе в redux:
Redux промежуточное программное обеспечение может быть использовано для ведения журнала, отчетов с аваром, разговором с асинхронным API, маршрутизацией и многое другое. Или мы можем сказать побочные эффекты В основном.
Итак, как наблюдаемое redux делает все это?
Через Эпос Отказ Epics являются основным примитивным примитивным примибием Redux. Epic – это просто простая функция, которая принимает в действие, а затем возвращает другое действие. Действие в → Действие OUT Отказ Поэтому действия рассматриваются как потоки.
Каждое действие, отправленное в любой компонент реакции, пройдет через такие функции (Epics) в качестве потока.
Посмотрим, какая простая эпика, которая берет в себя Действие «Пинг» и возвращает Новый действие «Понг» похоже:
const pingEpic = action$ => action$.filter(action => action.type === 'PING') .mapTo({ type: 'PONG' }) $ после Действие Используется для обозначения того, что эти переменные относятся к потокам. Таким образом, у нас есть поток действий, передаваемых в эпику, на котором мы использовали Фильтр Оператор RXJS.
Этот оператор фильтра фильтрует все действия, которые не имеют Тип Пинг Действительно Поэтому эпический Пенгпик касается только обращения с действиями тип «Пинг» Отказ Наконец, это Действие «Пинг» сопоставлен на новый Действие из тип «Понг» Удовлетворение основного правила эпохи: Действие в → Действие OUT Отказ
Поскольку каждый эпический обеспокоен только конкретным типом действий, у нас есть специальный оператор для действие $ (поток) для отфильтровывания нежелательных действий от потока. Этот оператор является oftype () оператор.
Переписать предыдущее эпическое использование oftype мы получаем:
const pingEpic = action$ => action$.ofType('PING') .mapTo({ type: 'PONG' })Если вы хотите, чтобы ваш EPIC позволить более одного типа действий, oftype () Оператор может занять любое количество аргументов, как так: oftype (тип 1, тип2, тип3, ...) .
Попасть в специфику того, как работает EPIC
Вы можете подумать, что действие «пинг» просто приходит и потребляется этим эпосом. Это не относится к делу. Есть две вещи, чтобы всегда помнить:
- Каждое действие всегда идет в редуктор
- Только после этого это действие, полученное EPIC
Следовательно, цикл Redux работает нормально, как следствие.
Действие «Пинг» Сначала достигает редуктора и затем получено EPIC, затем изменилось на новый действие «Понг» который отправляется на редуктор.
Мы можем даже получить доступ к состоянию магазина внутри EPIC, потому что второй аргумент EPIC является легкой версией магазина Redux! См. Ниже: const meepic = (Действие $, магазин) = & GT; Мы можем просто CA LL Store.getStat e () и получить доступ к состоянию внутри эпопехи.
Операторская цепочка
Между приемным действием и распределением нового, мы можем сделать все виды асинхронных побочных эффектов, которые мы хотим, например, вызовы AJAX, веб-розетки, таймеры и так далее. Это делается с использованием многочисленных Операторы предоставляется RX.
Мы получаем преимущества обратных вызовов, без этого пресловутого «обратного вызова ада».
Посмотрите, как мы можем использовать силу операторов ниже.
Общее использование
Предположим, что мы хотим искать слово с чем-то вроде API словаря, используя текст, введенный пользователем в режиме реального времени. Мы в основном занимаемся хранением (в магазине Redux) и отображение результатов от вызова API. Мы также хотели бы отбросить вызов API, чтобы API назывался внутри, скажем, 1 секунду, когда пользователь перестает печатать.
Вот как это будет сделано с использованием операторов EPIC и RXJS:
const search = (action$, store) => action$.ofType('SEARCH') .debounceTime(1000) .mergeMap(action => ajax.getJSON(`https://someapi/words/${action.payload}`) .map(payload => ({ type: 'SET_RESULTS', payload })) .catch(payload => Observable.of({type: 'API_ERROR', payload})) )Слишком много, чтобы справиться?! Не волнуйтесь, давайте сломаемся.
Epic получает поток действий всех oftype «Поиск» Отказ Поскольку пользователь постоянно печатает, полезная нагрузка каждого входящего действия ( Action.poyload ) содержит обновленную строку поиска.
Оператор debouncetime () используется для отфильтровывания некоторых действий в потоке, кроме последнего. Он в основном передает действие через нее только в том случае, если 1-секунду истек без него, не получая другое действие или наблюдаемое.
Затем мы сделаем запрос AJAX, сопоставив результаты к другому действию «Set_Results» который принимает данные ответа (полезная нагрузка) к редуктору, который является действием.
Любые ошибки API пойманы, используя поймать оператор. Новое действие испускается с деталями об ошибках, а затем отображает тостер с сообщением об ошибке.
Обратите внимание, как поймать внутри Mergemap () А после запроса Ajax? Это потому, что Mergemap () Создает цепь, которая изолирована. В противном случае ошибка достигнет oftype () и прекратит нашу эпику. Если это произойдет, Epic перестанет слушать любые действия в будущем!
Мы можем использовать традиционные обещания для запросов AJAX. Тем не менее, у них есть эта неотъемлемая проблема не может быть отменена. Таким образом, еще один важный корпус использования для использования EPIC является отмена Ajax.
Мы используем доставка Оператор для обработки этой проблемы. Это делается так же, как мы использовали это поймать Оператор внутри Mergemap и после запроса AJAX.
Это потому, что доставка Должен остановить текущий запрос AJAX и не весь эпик! Следовательно, здесь также важно изолирующие цепочки оператора.
Дебация, дросселирование, фильтрация, аякс отмена и другие, являются лишь кончиком айсберга. У нас есть множество Операторы В нашем распоряжении, затрудняя использование случаев, тривиально для решения. Используя эти операторы, вы можете получить как творческое, так как ваше воображение позволяет вам быть! Функциональное реактивное программирование (FRP) элегантно по-своему.
Мой сосредоточенность для этой статьи была в объяснении части FRP в Redux, используя Redux-наблюдаемый. Для настройки Redux-наблюдаемого в React + Redux, обратитесь к Официальные документы – Это очень хорошо документировано, подробно, и легкий свежий.
Обязательно проверите свою другую статью о Redux, которая исследует лучшую практику для создания редукторов:
Уменьшение редуктора Boeterplate с Cresecturecer () Во-первых, быстрый отвод каких редукторов в redux: medium.freecodecamp.org
Хотите улучшить ваши основы JavaScript? Дайте это чтение:
JavaScript ES6 Функции: Хорошие части ES6 предлагает несколько прохладных новых функций, которые делают программирование в JavaScript гораздо более гибким. Давайте поговорим о … medium.freecodecamp.org Руководство по переменным подъемам JavaScript? с пусть и const N Разработчики EW JavaScript часто испытывают трудное время понять уникальное поведение вариабельной/функциональной подъемной подъемники. Edium.freecodeCamp.org Функциональные вопросы подъема и подъема Это часть 2 для моей предыдущей статьи о переменной подъемнике под названием «Руководство по переменным подъемам JavaScript? С … м Edium.freecodeCamp.org.
Мир ✌️.
Оригинал: “https://www.freecodecamp.org/news/an-introduction-to-functional-reactive-programming-in-redux-b0c14d097836/”