Что такое redux saga

Что такое redux saga

Приступая к работе

Альтернативно, вы можете использовать предоставленные UMD сборки напрямую в на HTML странице. Смотрите эту секцию.

Предположим, что у нас есть интерфейс для извлечения некоторых пользовательских данных с удаленного сервера при нажатии кнопки. (Для краткости, мы просто покажем код запуска экшена.)

Компонент диспатчит action в виде простого объекта в Store. Мы создадим сагу, которая слушает все USER_FETCH_REQUESTED экшены и триггерит вызовы API для извлечения пользовательских данных.

Для запуска нашей саги, мы подключим ее к Redux Store, используя redux-saga мидлвар.

Использование UMD сборки в браузере

umd версия полезна, если вы не используете Webpack или Browserify. Вы можете получить доступ к ней, непосредственно из unpkg.

Доступны следующие сборки:

Сборка примеров из исходных файлов

Ниже приведены примеры, портированые (пока) из репозиториев Redux.

Есть три примера счетчика.

Для запуска примера, просто откройте index.html в вашем браузере.

Важно: ваш браузер должен поддерживать Генераторы. Последние версии Chrome/Firefox/Edge подойдут.

Демо, использующее низкоуровневое API для демонстрации отмены задачи.

Пример Shopping Cart

real-world пример (с webpack hot reloading)

Поддержите нас при помощи ежемесячного пожертвования и помогите нам продолжать нашу деятельность. [Стать меценатом]

Стань спонсором и получи свой логотип в нашем README на Github с ссылкой на ваш сайт. [Стать спонсором]

Источник

Что такое redux saga

redux-saga — это библиотека, которая призвана упростить и улучшить побочные эффекты (т.е. такие действия, как асинхронные операции, например, загрузки данных, и «грязные» действия, такие, как доступ к браузерному кешу), сделать лёгкими в тестировании и лучше справляться с ошибками.

Можно представить это так, что saga — это как отдельный поток в вашем приложении, который отвечает за побочные эффекты. redux-saga — это мидлвар redux, что означает, что этот поток может запускаться, останавливаться и отменяться из основного приложения с помощью обычных действий redux, оно имеет доступ к полному состоянию redux приложения и также может диспатчить действия redux.

Альтернативно, вы можете использовать предоставленные UMD сборки напрямую в на HTML странице. Смотрите эту секцию.

Предположим, что у нас есть интерфейс для извлечения некоторых пользовательских данных с удалённого сервера при нажатии кнопки. (Для краткости, мы просто покажем код запуска экшена.)

Компонент диспатчит действие в виде простого объекта в хранилище. Мы создадим saga, которая слушает все действия USER_FETCH_REQUESTED и генерирует вызовы API для извлечения пользовательских данных.

sagas.js

main.js

Использование UMD-сборки в браузере

версия umd полезна, если вы не используете Webpack или Browserify. Вы можете получить доступ к ней, непосредственно из unpkg.

Доступны следующие сборки:

Важно! Если ваш целевой браузер не поддерживает генераторы ES2015, вам нужно транспилировать код (например, через babel plugin) и предоставить корректный runtime, такой, например, как этот. Runtime нужно импортировать до redux-saga:

Сборка примеров из исходных файлов

Ниже приведены примеры, портированные (пока) из репозиториев Redux.

Есть три примера счётчика.

counter-vanilla

Для запуска примера, просто откройте index.html в браузере.

Важно: ваш браузер должен поддерживать генераторы. Подойдут последние версии Chrome/Firefox/Edge.

counter

cancellable-counter

Демо, использующее низкоуровневое API для демонстрации отмены задачи.

реальный пример (с горячей перезагрузкой webpack)

Вы можете найти официальный логотип Redux-Saga с различными вариантами в каталоге logo.

Поддержите нас ежемесячными пожертвованиями и помогите нам продолжать нашу деятельность. [Стать меценатом]

Стань спонсором и получи свой логотип в нашем README на GitHub с ссылкой на ваш сайт. [Стать спонсором]

Источник

Введение в Redux Saga

Когда использовать Redux Saga

В приложении, использующемRedux, когда вы запускаете действие, что-то меняется в состоянии приложения.

В этом случае вам может потребоваться сделать что-то, вытекающее из этого изменения состояния.

Например, вы можете захотеть:

Это все вещи, которые на самом деле не связаны с состоянием приложения или являются асинхронными, и вам нужно переместить их в место, отличное от ваших действий или редукторов (в то время как вы техническимог, это не лучший способ иметь чистую кодовую базу).

Представляем Redux Saga, промежуточное программное обеспечение Redux, которое поможет вам справиться с побочными эффектами.

Базовый пример использования Redux Saga

Чтобы не углубляться в теорию, прежде чем показывать реальный код, я кратко расскажу, как я решил проблему, с которой столкнулся при создании примера приложения.

В чате, когда пользователь пишет сообщение, я немедленно показываю это сообщение на экране, чтобы обеспечить оперативную обратную связь. Это делается черезRedux Action:

и состояние меняется через редуктор:

Вы инициализируете Redux Saga, сначала импортируя его, а затем применяясагав качестве промежуточного программного обеспечения для Redux Store:

Затем мы создаем промежуточное ПО и применяем его к нашему недавно созданному Redux Store:

Как это работает за кадром

БытьReduxПромежуточное ПО, Redux Saga может перехватывать действия Redux и внедрять свои собственные функции.

Есть несколько концепций, которые нужно усвоить, и вот основные ключевые слова, которые вы захотите вонзить в свою голову вместе:сага,генератор,промежуточное ПО,обещать,Пауза,продолжить,эффект,отправлять,действие,выполнено,решено,урожай,уступил.

Асагаэто некая «история», которая реагирует наэффектчто ваш код вызывает. Это может содержать что-то из того, о чем мы говорили раньше, например, HTTP-запрос или некоторую процедуру, которая сохраняется в кеш.

Мы создаемпромежуточное ПОсо спискомсагиto run, которых может быть один или несколько, и мы подключаем это промежуточное ПО к хранилищу Redux.

Асагаэтогенераторфункция. Когдаобещатьзапущен иуступил, промежуточное ПОприостанавливаетвсагадообещатьявляетсярешено.

Однаждыобещатьявляетсярешенопромежуточное ПОвозобновляетсясага, до следующегоурожайзаявление найдено, и вот оноприостановленныйснова, пока егообещать решает.

Внутри кода саги вы создадитепоследствияиспользуя несколько специальных вспомогательных функций, предоставляемых redux-saga упаковка. Для начала мы можем перечислить:

Когдаэффектвыполняется,сагаявляетсяприостановленодоэффектявляетсявыполнено.

Когдапромежуточное ПОвыполняет handleNewMessage сага, этоостанавливаетсяна yield takeEvery инструкция иждет(асинхронно, конечно) до тех пор, пока ADD_MESSAGE действиеотправлен. Затем он выполняет обратный вызов, исагаможетпродолжить.

Базовые помощники

Давайте познакомимся с самыми основными помощниками, которые вы можете использовать для запуска ваших эффектов:

takeEvery()

В watchMessages генератор останавливается до тех пор, пока ADD_MESSAGE боевые пожары, икаждый разон срабатывает, он вызовет postMessageToServer функция, бесконечно и одновременно (нет необходимости postMessageToServer чтобы завершить его выполнение до того, как можно будет запустить новый раз)

takeLatest()

take() отличается тем, что ждет только один раз. Когда происходит ожидаемое действие, обещание разрешается и итератор возобновляет работу, поэтому он может перейти к следующему набору инструкций.

Отправляет действие в магазин Redux. Вместо передачи в хранилище Redux или действия отправки в сагу вы можете просто использовать put() :

который возвращает простой объект, который вы можете легко проверить в своих тестах (подробнее о тестировании позже).

Если вы хотите вызвать какую-либо функцию в саге, вы можете сделать это, используя простой вызов функции, возвращающий обещание:

но это не очень хорошо с тестами. Вместо, call() позволяет обернуть этот вызов функции и вернуть объект, который можно легко проверить:

Параллельное выполнение эффектов

второй fetch() вызов не будет выполнен, пока первый не завершится успешно.

Чтобы выполнить их параллельно, оберните их в all() :

all() не будет решен, пока оба call() возвращаться.

race() отличается от all() не дожидаясь ответа всех помощников. Он просто ждет, пока один из них вернется, и все готово.

Это гонка, чтобы увидеть, кто из них финиширует первым, а потом мы забываем о других участниках.

Обычно он используется для отмены фоновой задачи, которая выполняется вечно, пока что-то не произойдет:

когда CANCEL_TASK действие, мы останавливаем другую задачу, которая в противном случае выполнялась бы вечно.

Источник

Зачем использовать Redux Saga?

Вы когда-нибудь задумывались, почему redux saga приобрела такую популярность и постепенно становится сердцем любого корпоративного приложения. В этой статье я расскажу вам о преимуществах использования redux saga. Кроме того, эта статья предназначена для новичков, чтобы понять / решить, когда и зачем использовать redux saga.

Redux Saga как Middleware

Redux Saga — это промежуточное программное обеспечение(middleware), которое берет на себя управление вашими действиями до того, как напрямую достигнет reducers.

Pабота без redux saga:

With Redux saga as middleware:

Action(s) → Redux Saga →Reducer(s)

Redux saga действует как промежуточное middleware, которое дает разработчикам возможность аккуратно разделить любую бизнес-логику, запросы xhr (широко известные как Ajax), манипуляции с данными или любые другие операции, которые могут показаться неприемлемыми для редукторов напрямую.

Зачем использовать Sagas

Давайте посмотрим на некоторые преимущества использования Saga:

Включение redux saga в существующее приложение:

вам понадобится babel, чтобы преобразовать его в код ES5

В приведенном выше коде мы пишем наш первый метод саги, который говорит, что всякий раз, когда запускается действие с типом: FETCH_REQUESTED, оно вызывает метод выборки данных. Точно так же мы можем зарегистрировать несколько методов в первой саге, например:

Напоследок напишем, что делает метод саги

Я знаю, что многие из вас подумают, что такое call и put. Мы постараемся понять это в следующем рассказе. На данный момент было бы достаточно знать, что эффект «call» принимает первые аргументы в качестве имени функции, которая будет выполняться, например: вызвать api.fetchUser с параметром action.payload.url и оставить его в качестве параметров, а «put» можно рассматривать как псевдоним для store.dispatch (<тип: “FETCH_SUCCEEDED”, данные: данные>);

В ближайшие недели я напишу следующую статью и расскажу больше об эффектах / асинхронных редукторах / тестировании и расширенном использовании.

Надеюсь, эта статья окажется для вас полезной.

Источник

Redux-Saga

An intuitive Redux side effect manager.

Easy to manage, easy to test, and executes efficiently.

Asynchronous

ES6 generators make asynchronous flows easy to read, write, and test. Create complex side effects without getting bogged down by the details.

Composition-focused

Sagas enable numerous approaches to tackling parallel execution, task concurrency, task racing, task cancellation, and more. Keep total control over the flow of your code.

Easy To Test

Assert results at each step of a generator or for a saga as a whole. Either way, side effect testing is quick, concise, and painless, as testing should be.

Example Usage

Suppose we have a UI to fetch some user data from a remote server when a button is clicked. (For brevity, we’ll just show the action triggering code.)

The component dispatches a plain object action to the store. We’ll create a Saga that watches for all USER_FETCH_REQUESTED actions and triggers an API call to fetch the user data.

To run our Saga, we have to connect it to the Redux store using the redux-saga middleware.

Backers

Support us with a monthly donation and help us continue our activities. Become a backer

Sponsors

Become a sponsor and have your logo shown below and on Github with a link to your site. Become a sponsor

Источник