Redux Logo Landscape

redux-saga

npm version CDNJS npm Discord Shield OpenCollective OpenCollective

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.

The mental model is that a saga is like a separate thread in your application that's solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well.

It uses an ES6 feature called Generators to make those asynchronous flows easy to read, write and test. (if you're not familiar with them here are some introductory links) By doing so, these asynchronous flows look like your standard synchronous JavaScript code. (kind of like async/await, but generators have a few more awesome features we need)

You might've used redux-thunk before to handle your data fetching. Contrary to redux thunk, you don't end up in callback hell, you can test your asynchronous flows easily and your actions stay pure.

Getting started

Install

$ npm install redux-saga

or

$ yarn add redux-saga

Alternatively, you may use the provided UMD builds directly in the <script> tag of an HTML page. See this section.

Usage Example

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.)

class UserComponent extends React.Component {
  ...
  onSomeButtonClicked() {
    const { userId, dispatch } = this.props
    dispatch({type: 'USER_FETCH_REQUESTED', payload: {userId}})
  }
  ...
}

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.

sagas.js

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from '...'

// worker Saga: will be fired on USER_FETCH_REQUESTED actions
function* fetchUser(action) {
  try {
    const user = yield call(Api.fetchUser, action.payload.userId)
    yield put({ type: 'USER_FETCH_SUCCEEDED', user: user })
  } catch (e) {
    yield put({ type: 'USER_FETCH_FAILED', message: e.message })
  }
}

/*
  Starts fetchUser on each dispatched `USER_FETCH_REQUESTED` action.
  Allows concurrent fetches of user.
*/
function* mySaga() {
  yield takeEvery('USER_FETCH_REQUESTED', fetchUser)
}

/*
  Alternatively you may use takeLatest.

  Does not allow concurrent fetches of user. If "USER_FETCH_REQUESTED" gets
  dispatched while a fetch is already pending, that pending fetch is cancelled
  and only the latest one will be run.
*/
function* mySaga() {
  yield takeLatest('USER_FETCH_REQUESTED', fetchUser)
}

export default mySaga

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

main.js

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import mySaga from './sagas'

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(reducer, applyMiddleware(sagaMiddleware))

// then run the saga
sagaMiddleware.run(mySaga)

// render the application

Documentation

Translation

Using umd build in the browser

There is also a umd build of redux-saga available in the dist/ folder. When using the umd build redux-saga is available as ReduxSaga in the window object. This enables you to create Saga middleware without using ES6 import syntax like this:

var sagaMiddleware = ReduxSaga.default()

The umd version is useful if you don't use Webpack or Browserify. You can access it directly from unpkg.

The following builds are available:

Important! If the browser you are targeting doesn't support ES2015 generators, you must transpile them (i.e. with babel plugin) and provide a valid runtime, such as the one here. The runtime must be imported before redux-saga:

import 'regenerator-runtime/runtime'
// then
import sagaMiddleware from 'redux-saga'

Building examples from sources

$ git clone https://github.com/redux-saga/redux-saga.git
$ cd redux-saga
$ yarn
$ npm test

Below are the examples ported (so far) from the Redux repos.

Counter examples

There are three counter examples.

counter-vanilla

Demo using vanilla JavaScript and UMD builds. All source is inlined in index.html.

To launch the example, open index.html in your browser.

Important: your browser must support Generators. Latest versions of Chrome/Firefox/Edge are suitable.

counter

Demo using webpack and high-level API takeEvery.

$ npm run counter

# test sample for the generator
$ npm run test-counter

cancellable-counter

Demo using low-level API to demonstrate task cancellation.

$ npm run cancellable-counter

Shopping Cart example

$ npm run shop

# test sample for the generator
$ npm run test-shop

async example

$ npm run async

# test sample for the generators
$ npm run test-async

real-world example (with webpack hot reloading)

$ npm run real-world

# sorry, no tests yet

TypeScript

Redux-Saga with TypeScript requires DOM.Iterable or ES2015.Iterable. If your target is ES6, you are likely already set, however, for ES5, you will need to add it yourself. Check your tsconfig.json file, and the official compiler options documentation.

Logo

You can find the official Redux-Saga logo with different flavors in the logo directory.

Redux Saga chooses generators over async/await

A few issues have been raised asking whether Redux saga plans to use async/await syntax instead of generators.

We will continue to use generators. The primary mechanism of async/await is Promises and it is very difficult to retain the scheduling simplicity and semantics of existing Saga concepts using Promises. async/await simply don't allow for certain things - like i.e. cancellation. With generators we have full power over how & when effects are executed.

Backers

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

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

License

Copyright (c) 2015 Yassine Elouafi.

Licensed under The MIT License (MIT).

redux-saga/redux-saga

{
"props": {
"initialPayload": {
"allShortcutsEnabled": false,
"path": "/",
"repo": {
"id": 47071941,
"defaultBranch": "main",
"name": "redux-saga",
"ownerLogin": "redux-saga",
"currentUserCanPush": false,
"isFork": false,
"isEmpty": false,
"createdAt": "2015-11-29T16:58:12.000Z",
"ownerAvatar": "https://avatars.githubusercontent.com/u/24776643?v=4",
"public": true,
"private": false,
"isOrgOwned": true
},
"currentUser": null,
"refInfo": {
"name": "main",
"listCacheKey": "v0:1708500523.0",
"canEdit": false,
"refType": "branch",
"currentOid": "9ec63efbffb576a5d2c8b4bbf9df8f020693fdad"
},
"tree": {
"items": [
{
"name": ".changeset",
"path": ".changeset",
"contentType": "directory"
},
{
"name": ".github",
"path": ".github",
"contentType": "directory"
},
{
"name": "build",
"path": "build",
"contentType": "directory"
},
{
"name": "docs",
"path": "docs",
"contentType": "directory"
},
{
"name": "examples",
"path": "examples",
"contentType": "directory"
},
{
"name": "logo",
"path": "logo",
"contentType": "directory"
},
{
"name": "packages",
"path": "packages",
"contentType": "directory"
},
{
"name": "patches",
"path": "patches",
"contentType": "directory"
},
{
"name": "website",
"path": "website",
"contentType": "directory"
},
{
"name": ".browserslistrc",
"path": ".browserslistrc",
"contentType": "file"
},
{
"name": ".eslintignore",
"path": ".eslintignore",
"contentType": "file"
},
{
"name": ".eslintrc.json",
"path": ".eslintrc.json",
"contentType": "file"
},
{
"name": ".gitignore",
"path": ".gitignore",
"contentType": "file"
},
{
"name": ".huskyrc",
"path": ".huskyrc",
"contentType": "file"
},
{
"name": ".lintstagedrc",
"path": ".lintstagedrc",
"contentType": "file"
},
{
"name": ".npmrc",
"path": ".npmrc",
"contentType": "file"
},
{
"name": ".prettierignore",
"path": ".prettierignore",
"contentType": "file"
},
{
"name": ".prettierrc",
"path": ".prettierrc",
"contentType": "file"
},
{
"name": "CHANGELOG.md",
"path": "CHANGELOG.md",
"contentType": "file"
},
{
"name": "CONTRIBUTING.md",
"path": "CONTRIBUTING.md",
"contentType": "file"
},
{
"name": "LICENSE",
"path": "LICENSE",
"contentType": "file"
},
{
"name": "LICENSE-logo.md",
"path": "LICENSE-logo.md",
"contentType": "file"
},
{
"name": "README.md",
"path": "README.md",
"contentType": "file"
},
{
"name": "README_es.md",
"path": "README_es.md",
"contentType": "file"
},
{
"name": "README_ja.md",
"path": "README_ja.md",
"contentType": "file"
},
{
"name": "README_ru.md",
"path": "README_ru.md",
"contentType": "file"
},
{
"name": "README_zh-cn.md",
"path": "README_zh-cn.md",
"contentType": "file"
},
{
"name": "README_zh-hant.md",
"path": "README_zh-hant.md",
"contentType": "file"
},
{
"name": "SECURITY.md",
"path": "SECURITY.md",
"contentType": "file"
},
{
"name": "SUMMARY.md",
"path": "SUMMARY.md",
"contentType": "file"
},
{
"name": "lerna.json",
"path": "lerna.json",
"contentType": "file"
},
{
"name": "package.json",
"path": "package.json",
"contentType": "file"
},
{
"name": "yarn.lock",
"path": "yarn.lock",
"contentType": "file"
}
],
"templateDirectorySuggestionUrl": null,
"readme": null,
"totalCount": 33,
"showBranchInfobar": false
},
"fileTree": null,
"fileTreeProcessingTime": null,
"foldersToFetch": [],
"treeExpanded": false,
"symbolsExpanded": false,
"isOverview": true,
"overview": {
"banners": {
"shouldRecommendReadme": false,
"isPersonalRepo": false,
"showUseActionBanner": false,
"actionSlug": null,
"actionId": null,
"showProtectBranchBanner": false,
"recentlyTouchedDataChannel": null,
"publishBannersInfo": {
"dismissActionNoticePath": "/settings/dismiss-notice/publish_action_from_repo",
"releasePath": "/redux-saga/redux-saga/releases/new?marketplace=true",
"showPublishActionBanner": false
},
"interactionLimitBanner": null,
"showInvitationBanner": false,
"inviterName": null
},
"codeButton": {
"contactPath": "/contact",
"isEnterprise": false,
"local": {
"protocolInfo": {
"httpAvailable": true,
"sshAvailable": null,
"httpUrl": "https://github.com/redux-saga/redux-saga.git",
"showCloneWarning": null,
"sshUrl": null,
"sshCertificatesRequired": null,
"sshCertificatesAvailable": null,
"ghCliUrl": "gh repo clone redux-saga/redux-saga",
"defaultProtocol": "http",
"newSshKeyUrl": "/settings/ssh/new",
"setProtocolPath": "/users/set_protocol"
},
"platformInfo": {
"cloneUrl": "https://desktop.github.com",
"showVisualStudioCloneButton": false,
"visualStudioCloneUrl": "https://windows.github.com",
"showXcodeCloneButton": false,
"xcodeCloneUrl": "https://developer.apple.com",
"zipballUrl": "/redux-saga/redux-saga/archive/refs/heads/main.zip"
}
},
"newCodespacePath": "/codespaces/new?hide_repo_select=true&repo=47071941"
},
"popovers": {
"rename": null,
"renamedParentRepo": null
},
"commitCount": "1,943",
"overviewFiles": [
{
"displayName": "README.md",
"repoName": "redux-saga",
"refName": "main",
"path": "README.md",
"preferredFileType": "readme",
"tabName": "README",
"richText": "<article class=\"markdown-body entry-content container-lg\" itemprop=\"text\"><p dir=\"auto\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://camo.githubusercontent.com/e684d3c84736416258a93f56d3f2a98a12b1fff4db79b7c1650d358df11ebf88/68747470733a2f2f72656475782d736167612e6a732e6f72672f696d672f52656475782d536167612d4c6f676f2d4c616e6473636170652e706e67\"><img src=\"https://camo.githubusercontent.com/e684d3c84736416258a93f56d3f2a98a12b1fff4db79b7c1650d358df11ebf88/68747470733a2f2f72656475782d736167612e6a732e6f72672f696d672f52656475782d536167612d4c6f676f2d4c616e6473636170652e706e67\" alt=\"Redux Logo Landscape\" width=\"800px\" data-canonical-src=\"https://redux-saga.js.org/img/Redux-Saga-Logo-Landscape.png\" style=\"max-width: 100%;\"></a></p>\n<h1 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-redux-saga\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#redux-saga\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>redux-saga</h1>\n<p dir=\"auto\"><a href=\"https://www.npmjs.com/package/redux-saga\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/92e86806e097f10f664937cd30ed587d4c79caeb7c6bd19f36128417dd7ed8ae/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656475782d736167612e737667\" alt=\"npm version\" data-canonical-src=\"https://img.shields.io/npm/v/redux-saga.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://cdnjs.com/libraries/redux-saga\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/1b158ecf5ecdc90251191d1c4167d53e7a07e1d6aad11b15ad718d501177ec06/68747470733a2f2f696d672e736869656c64732e696f2f63646e6a732f762f72656475782d736167612e737667\" alt=\"CDNJS\" data-canonical-src=\"https://img.shields.io/cdnjs/v/redux-saga.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://www.npmjs.com/package/redux-saga\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/d9677f704f1bde2ee661fb9ffc9d4ced84bf7ab1e23f36cfa750788da33dcab3/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f72656475782d736167612e737667\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/npm/dm/redux-saga.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://discord.gg/AKz29HvK2h\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/c950d34eee5efb886c016da90017aebc35df0531a2f41aa2b033e0549d79a4d4/68747470733a2f2f696d672e736869656c64732e696f2f646973636f72642f3734303039303736383136343635313030383f6c6162656c3d646973636f7264266c6f676f3d646973636f7264\" alt=\"Discord Shield\" data-canonical-src=\"https://img.shields.io/discord/740090768164651008?label=discord&amp;logo=discord\" style=\"max-width: 100%;\"></a>\n<a href=\"#backers\"><img src=\"https://camo.githubusercontent.com/9d980dac0ab5a517738c0687bef665bd670644c8a8c9f0b7962ab9ed79a91063/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b6572732f62616467652e737667\" alt=\"OpenCollective\" data-canonical-src=\"https://opencollective.com/redux-saga/backers/badge.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"#sponsors\"><img src=\"https://camo.githubusercontent.com/23362431cc89586dbd1b9897c97f3e7c0ee2b813ba0b4d0c38d112904459c017/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f72732f62616467652e737667\" alt=\"OpenCollective\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsors/badge.svg\" style=\"max-width: 100%;\"></a></p>\n<p dir=\"auto\"><code>redux-saga</code> is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.</p>\n<p dir=\"auto\">The mental model is that a saga is like a separate thread in your application that's solely responsible for side effects. <code>redux-saga</code> is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well.</p>\n<p dir=\"auto\">It uses an ES6 feature called Generators to make those asynchronous flows easy to read, write and test. <em>(if you're not familiar with them <a href=\"https://redux-saga.js.org/docs/ExternalResources.html\" rel=\"nofollow\">here are some introductory links</a>)</em> By doing so, these asynchronous flows look like your standard synchronous JavaScript code. (kind of like <code>async</code>/<code>await</code>, but generators have a few more awesome features we need)</p>\n<p dir=\"auto\">You might've used <code>redux-thunk</code> before to handle your data fetching. Contrary to redux thunk, you don't end up in callback hell, you can test your asynchronous flows easily and your actions stay pure.</p>\n<h1 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-getting-started\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#getting-started\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Getting started</h1>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-install\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#install\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Install</h2>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"$ npm install redux-saga\"><pre>$ npm install redux-saga</pre></div>\n<p dir=\"auto\">or</p>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"$ yarn add redux-saga\"><pre>$ yarn add redux-saga</pre></div>\n<p dir=\"auto\">Alternatively, you may use the provided UMD builds directly in the <code>&lt;script&gt;</code> tag of an HTML page. See <a href=\"#using-umd-build-in-the-browser\">this section</a>.</p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-usage-example\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#usage-example\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Usage Example</h2>\n<p dir=\"auto\">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.)</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"class UserComponent extends React.Component {\n ...\n onSomeButtonClicked() {\n const { userId, dispatch } = this.props\n dispatch({type: 'USER_FETCH_REQUESTED', payload: {userId}})\n }\n ...\n}\"><pre><span class=\"pl-k\">class</span> <span class=\"pl-v\">UserComponent</span> <span class=\"pl-k\">extends</span> <span class=\"pl-v\">React</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">Component</span> <span class=\"pl-kos\">{</span>\n ...\n <span class=\"pl-en\">onSomeButtonClicked</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">const</span> <span class=\"pl-kos\">{</span> userId<span class=\"pl-kos\">,</span> dispatch <span class=\"pl-kos\">}</span> <span class=\"pl-c1\">=</span> <span class=\"pl-smi\">this</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">props</span>\n <span class=\"pl-en\">dispatch</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span><span class=\"pl-c1\">type</span>: <span class=\"pl-s\">'USER_FETCH_REQUESTED'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">payload</span>: <span class=\"pl-kos\">{</span>userId<span class=\"pl-kos\">}</span><span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span>\n <span class=\"pl-kos\">}</span>\n ...\n<span class=\"pl-kos\">}</span></pre></div>\n<p dir=\"auto\">The Component dispatches a plain Object action to the Store. We'll create a Saga that watches for all <code>USER_FETCH_REQUESTED</code> actions and triggers an API call to fetch the user data.</p>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sagasjs\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sagasjs\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>sagas.js</code></h4>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'\nimport Api from '...'\n\n// worker Saga: will be fired on USER_FETCH_REQUESTED actions\nfunction* fetchUser(action) {\n try {\n const user = yield call(Api.fetchUser, action.payload.userId)\n yield put({ type: 'USER_FETCH_SUCCEEDED', user: user })\n } catch (e) {\n yield put({ type: 'USER_FETCH_FAILED', message: e.message })\n }\n}\n\n/*\n Starts fetchUser on each dispatched `USER_FETCH_REQUESTED` action.\n Allows concurrent fetches of user.\n*/\nfunction* mySaga() {\n yield takeEvery('USER_FETCH_REQUESTED', fetchUser)\n}\n\n/*\n Alternatively you may use takeLatest.\n\n Does not allow concurrent fetches of user. If &quot;USER_FETCH_REQUESTED&quot; gets\n dispatched while a fetch is already pending, that pending fetch is cancelled\n and only the latest one will be run.\n*/\nfunction* mySaga() {\n yield takeLatest('USER_FETCH_REQUESTED', fetchUser)\n}\n\nexport default mySaga\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-kos\">{</span> <span class=\"pl-s1\">call</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">put</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">takeEvery</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">takeLatest</span> <span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'redux-saga/effects'</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-v\">Api</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'...'</span>\n\n<span class=\"pl-c\">// worker Saga: will be fired on USER_FETCH_REQUESTED actions</span>\n<span class=\"pl-k\">function</span><span class=\"pl-c1\">*</span> <span class=\"pl-s1\">fetchUser</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">action</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">try</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">const</span> <span class=\"pl-s1\">user</span> <span class=\"pl-c1\">=</span> <span class=\"pl-k\">yield</span> <span class=\"pl-en\">call</span><span class=\"pl-kos\">(</span><span class=\"pl-v\">Api</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">fetchUser</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">action</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">payload</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">userId</span><span class=\"pl-kos\">)</span>\n <span class=\"pl-k\">yield</span> <span class=\"pl-en\">put</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span> <span class=\"pl-c1\">type</span>: <span class=\"pl-s\">'USER_FETCH_SUCCEEDED'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">user</span>: <span class=\"pl-s1\">user</span> <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span>\n <span class=\"pl-kos\">}</span> <span class=\"pl-k\">catch</span> <span class=\"pl-kos\">(</span><span class=\"pl-s1\">e</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">yield</span> <span class=\"pl-en\">put</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span> <span class=\"pl-c1\">type</span>: <span class=\"pl-s\">'USER_FETCH_FAILED'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">message</span>: <span class=\"pl-s1\">e</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">message</span> <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span>\n <span class=\"pl-kos\">}</span>\n<span class=\"pl-kos\">}</span>\n\n<span class=\"pl-c\">/*</span>\n<span class=\"pl-c\"> Starts fetchUser on each dispatched `USER_FETCH_REQUESTED` action.</span>\n<span class=\"pl-c\"> Allows concurrent fetches of user.</span>\n<span class=\"pl-c\">*/</span>\n<span class=\"pl-k\">function</span><span class=\"pl-c1\">*</span> <span class=\"pl-s1\">mySaga</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">yield</span> <span class=\"pl-en\">takeEvery</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'USER_FETCH_REQUESTED'</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">fetchUser</span><span class=\"pl-kos\">)</span>\n<span class=\"pl-kos\">}</span>\n\n<span class=\"pl-c\">/*</span>\n<span class=\"pl-c\"> Alternatively you may use takeLatest.</span>\n<span class=\"pl-c\"></span>\n<span class=\"pl-c\"> Does not allow concurrent fetches of user. If \"USER_FETCH_REQUESTED\" gets</span>\n<span class=\"pl-c\"> dispatched while a fetch is already pending, that pending fetch is cancelled</span>\n<span class=\"pl-c\"> and only the latest one will be run.</span>\n<span class=\"pl-c\">*/</span>\n<span class=\"pl-k\">function</span><span class=\"pl-c1\">*</span> <span class=\"pl-s1\">mySaga</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">yield</span> <span class=\"pl-en\">takeLatest</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'USER_FETCH_REQUESTED'</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">fetchUser</span><span class=\"pl-kos\">)</span>\n<span class=\"pl-kos\">}</span>\n\n<span class=\"pl-k\">export</span> <span class=\"pl-k\">default</span> <span class=\"pl-s1\">mySaga</span></pre></div>\n<p dir=\"auto\">To run our Saga, we'll have to connect it to the Redux Store using the <code>redux-saga</code> middleware.</p>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-mainjs\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#mainjs\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><code>main.js</code></h4>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { createStore, applyMiddleware } from 'redux'\nimport createSagaMiddleware from 'redux-saga'\n\nimport reducer from './reducers'\nimport mySaga from './sagas'\n\n// create the saga middleware\nconst sagaMiddleware = createSagaMiddleware()\n// mount it on the Store\nconst store = createStore(reducer, applyMiddleware(sagaMiddleware))\n\n// then run the saga\nsagaMiddleware.run(mySaga)\n\n// render the application\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-kos\">{</span> <span class=\"pl-s1\">createStore</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">applyMiddleware</span> <span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'redux'</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-s1\">createSagaMiddleware</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'redux-saga'</span>\n\n<span class=\"pl-k\">import</span> <span class=\"pl-s1\">reducer</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'./reducers'</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-s1\">mySaga</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'./sagas'</span>\n\n<span class=\"pl-c\">// create the saga middleware</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">sagaMiddleware</span> <span class=\"pl-c1\">=</span> <span class=\"pl-en\">createSagaMiddleware</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span>\n<span class=\"pl-c\">// mount it on the Store</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">store</span> <span class=\"pl-c1\">=</span> <span class=\"pl-en\">createStore</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">reducer</span><span class=\"pl-kos\">,</span> <span class=\"pl-en\">applyMiddleware</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">sagaMiddleware</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span>\n\n<span class=\"pl-c\">// then run the saga</span>\n<span class=\"pl-s1\">sagaMiddleware</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">run</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">mySaga</span><span class=\"pl-kos\">)</span>\n\n<span class=\"pl-c\">// render the application</span></pre></div>\n<h1 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-documentation\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#documentation\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Documentation</h1>\n<ul dir=\"auto\">\n<li><a href=\"https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html\" rel=\"nofollow\">Introduction</a></li>\n<li><a href=\"https://redux-saga.js.org/docs/basics/DeclarativeEffects\" rel=\"nofollow\">Basic Concepts</a></li>\n<li><a href=\"https://redux-saga.js.org/docs/advanced/Channels\" rel=\"nofollow\">Advanced Concepts</a></li>\n<li><a href=\"https://redux-saga.js.org/docs/recipes/index.html\" rel=\"nofollow\">Recipes</a></li>\n<li><a href=\"https://redux-saga.js.org/docs/ExternalResources.html\" rel=\"nofollow\">External Resources</a></li>\n<li><a href=\"https://redux-saga.js.org/docs/Troubleshooting.html\" rel=\"nofollow\">Troubleshooting</a></li>\n<li><a href=\"https://redux-saga.js.org/docs/Glossary.html\" rel=\"nofollow\">Glossary</a></li>\n<li><a href=\"https://redux-saga.js.org/docs/api/index.html\" rel=\"nofollow\">API Reference</a></li>\n</ul>\n<h1 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-translation\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#translation\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Translation</h1>\n<ul dir=\"auto\">\n<li><a href=\"https://github.com/superRaytin/redux-saga-in-chinese\">Chinese</a></li>\n<li><a href=\"https://github.com/neighborhood999/redux-saga\">Traditional Chinese</a></li>\n<li><a href=\"https://github.com/redux-saga/redux-saga/blob/main/README_ja.md\">Japanese</a></li>\n<li><a href=\"https://github.com/mskims/redux-saga-in-korean\">Korean</a></li>\n<li><a href=\"https://github.com/joelbarbosa/redux-saga-pt_BR\">Portuguese</a></li>\n<li><a href=\"https://github.com/redux-saga/redux-saga/blob/main/README_ru.md\">Russian</a></li>\n</ul>\n<h1 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-using-umd-build-in-the-browser\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#using-umd-build-in-the-browser\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Using umd build in the browser</h1>\n<p dir=\"auto\">There is also a <strong>umd</strong> build of <code>redux-saga</code> available in the <code>dist/</code> folder. When using the umd build <code>redux-saga</code> is available as <code>ReduxSaga</code> in the window object. This enables you to create Saga middleware without using ES6 <code>import</code> syntax like this:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"var sagaMiddleware = ReduxSaga.default()\"><pre><span class=\"pl-k\">var</span> <span class=\"pl-s1\">sagaMiddleware</span> <span class=\"pl-c1\">=</span> <span class=\"pl-v\">ReduxSaga</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">default</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span></pre></div>\n<p dir=\"auto\">The umd version is useful if you don't use Webpack or Browserify. You can access it directly from <a href=\"https://unpkg.com/\" rel=\"nofollow\">unpkg</a>.</p>\n<p dir=\"auto\">The following builds are available:</p>\n<ul dir=\"auto\">\n<li><a href=\"https://unpkg.com/redux-saga/dist/redux-saga.umd.js\" rel=\"nofollow\">https://unpkg.com/redux-saga/dist/redux-saga.umd.js</a></li>\n<li><a href=\"https://unpkg.com/redux-saga/dist/redux-saga.umd.min.js\" rel=\"nofollow\">https://unpkg.com/redux-saga/dist/redux-saga.umd.min.js</a></li>\n</ul>\n<p dir=\"auto\"><strong>Important!</strong> If the browser you are targeting doesn't support <em>ES2015 generators</em>, you must transpile them (i.e. with <a href=\"https://github.com/facebook/regenerator/tree/main/packages/regenerator-transform\">babel plugin</a>) and provide a valid runtime, such as <a href=\"https://unpkg.com/regenerator-runtime/runtime.js\" rel=\"nofollow\">the one here</a>. The runtime must be imported before <strong>redux-saga</strong>:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import 'regenerator-runtime/runtime'\n// then\nimport sagaMiddleware from 'redux-saga'\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-s\">'regenerator-runtime/runtime'</span>\n<span class=\"pl-c\">// then</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-s1\">sagaMiddleware</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'redux-saga'</span></pre></div>\n<h1 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-building-examples-from-sources\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#building-examples-from-sources\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Building examples from sources</h1>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"$ git clone https://github.com/redux-saga/redux-saga.git\n$ cd redux-saga\n$ yarn\n$ npm test\"><pre>$ git clone https://github.com/redux-saga/redux-saga.git\n$ <span class=\"pl-c1\">cd</span> redux-saga\n$ yarn\n$ npm <span class=\"pl-c1\">test</span></pre></div>\n<p dir=\"auto\">Below are the examples ported (so far) from the Redux repos.</p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-counter-examples\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#counter-examples\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Counter examples</h3>\n<p dir=\"auto\">There are three counter examples.</p>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-counter-vanilla\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#counter-vanilla\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>counter-vanilla</h4>\n<p dir=\"auto\">Demo using vanilla JavaScript and UMD builds. All source is inlined in <code>index.html</code>.</p>\n<p dir=\"auto\">To launch the example, open <code>index.html</code> in your browser.</p>\n<blockquote>\n<p dir=\"auto\">Important: your browser must support Generators. Latest versions of Chrome/Firefox/Edge are suitable.</p>\n</blockquote>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-counter\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#counter\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>counter</h4>\n<p dir=\"auto\">Demo using <code>webpack</code> and high-level API <code>takeEvery</code>.</p>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"$ npm run counter\n\n# test sample for the generator\n$ npm run test-counter\"><pre>$ npm run counter\n\n<span class=\"pl-c\"><span class=\"pl-c\">#</span> test sample for the generator</span>\n$ npm run test-counter</pre></div>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-cancellable-counter\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#cancellable-counter\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>cancellable-counter</h4>\n<p dir=\"auto\">Demo using low-level API to demonstrate task cancellation.</p>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"$ npm run cancellable-counter\"><pre>$ npm run cancellable-counter</pre></div>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-shopping-cart-example\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#shopping-cart-example\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Shopping Cart example</h3>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"$ npm run shop\n\n# test sample for the generator\n$ npm run test-shop\"><pre>$ npm run shop\n\n<span class=\"pl-c\"><span class=\"pl-c\">#</span> test sample for the generator</span>\n$ npm run test-shop</pre></div>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-async-example\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#async-example\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>async example</h3>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"$ npm run async\n\n# test sample for the generators\n$ npm run test-async\"><pre>$ npm run async\n\n<span class=\"pl-c\"><span class=\"pl-c\">#</span> test sample for the generators</span>\n$ npm run test-async</pre></div>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-real-world-example-with-webpack-hot-reloading\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#real-world-example-with-webpack-hot-reloading\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>real-world example (with webpack hot reloading)</h3>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"$ npm run real-world\n\n# sorry, no tests yet\"><pre>$ npm run real-world\n\n<span class=\"pl-c\"><span class=\"pl-c\">#</span> sorry, no tests yet</span></pre></div>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-typescript\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#typescript\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>TypeScript</h3>\n<p dir=\"auto\">Redux-Saga with TypeScript requires <code>DOM.Iterable</code> or <code>ES2015.Iterable</code>. If your <code>target</code> is <code>ES6</code>, you are likely already set, however, for <code>ES5</code>, you will need to add it yourself.\nCheck your <code>tsconfig.json</code> file, and the official <a href=\"https://www.typescriptlang.org/docs/handbook/compiler-options.html\" rel=\"nofollow\">compiler options</a> documentation.</p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-logo\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#logo\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Logo</h3>\n<p dir=\"auto\">You can find the official Redux-Saga logo with different flavors in the <a href=\"https://github.com/redux-saga/redux-saga/tree/main/logo\">logo directory</a>.</p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-redux-saga-chooses-generators-over-asyncawait\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#redux-saga-chooses-generators-over-asyncawait\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Redux Saga chooses generators over <code>async/await</code></h2>\n<p dir=\"auto\">A <a href=\"https://github.com/redux-saga/redux-saga/issues/1373#issuecomment-381320534\" data-hovercard-type=\"issue\" data-hovercard-url=\"/redux-saga/redux-saga/issues/1373/hovercard\">few</a> <a href=\"https://github.com/redux-saga/redux-saga/issues/987#issuecomment-301039792\" data-hovercard-type=\"issue\" data-hovercard-url=\"/redux-saga/redux-saga/issues/987/hovercard\">issues</a> have been raised asking whether Redux saga plans to use <code>async/await</code> syntax instead of generators.</p>\n<p dir=\"auto\">We will continue to use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator\" rel=\"nofollow\">generators</a>. The primary mechanism of <code>async/await</code> is Promises and it is very difficult to retain the scheduling simplicity and semantics of existing Saga concepts using Promises. <code>async/await</code> simply don't allow for certain things - like i.e. cancellation. With generators we have full power over how &amp; when effects are executed.</p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-backers\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#backers\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Backers</h2>\n<p dir=\"auto\">Support us with a monthly donation and help us continue our activities. [<a href=\"https://opencollective.com/redux-saga#backer\" rel=\"nofollow\">Become a backer</a>]</p>\n<p dir=\"auto\"><a href=\"https://opencollective.com/redux-saga/backer/0/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/95c2441950635cfa7c511e586eaca74b052ac61ea45fb6b9875de14d8b110a1e/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f302f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/0/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/1/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/a0bd43e988dc22fe2386fb90899b729bfb30c166069dcd0ad61b086804027a70/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f312f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/1/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/2/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/206bc0a15521f5acf56c8ad339027c759e03fe279bb60fc9b5359ffaf08b6b2b/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f322f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/2/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/3/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/0de15ca26b622259ef4716204f1dd56997ebe8f49c35da39dc55436d92d48c93/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f332f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/3/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/4/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/4edc49f3bf24559019a55b4a6aad135432e1873ee63ed5be502f87579e70ea5d/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f342f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/4/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/5/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/fc0469d5b80643b78c6a24faf233c8d92cf5ca01fc04e1ab85fbab1ff10b5952/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f352f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/5/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/6/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/09b24f1cd02407aee61a7c05223f1afbc79db90803ab792c79b40750bdd76498/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f362f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/6/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/7/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/9f8e99d1a1a27f30e3238f94b2b60c819c8ad99e0e685279808d03b2939e4a88/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f372f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/7/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/8/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/beca735c917577e2c7578411681ef4145ebdbfdd158c4d16141fe647f6745963/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f382f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/8/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/9/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/a79e7e887419f6c5a389951ab07342eead7433d4db5ee3fced2588ce1c13d029/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f392f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/9/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/10/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/1df3895107bb814bcd5681fff99423acd18840d24fdd4e1014fc4707d10e8b6a/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f31302f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/10/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/11/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/0152fdb3522be6737ed479a9706fcf589e096f38cabb6bd241fd5604b2aa0c39/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f31312f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/11/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/12/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/15c4cdae919cbc65d55ecfdfc15d920ea6053fcffcc356b5dc54845e659a324f/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f31322f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/12/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/13/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/bdba0842d89aec33645ead0466918460194b77c36d45a45f09d3da0e57ee81b9/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f31332f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/13/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/14/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/79398cb1ae7f16b7586ec02d49bc775421110f8736ed37c4c4c81fbff451bc34/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f31342f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/14/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/15/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/bc7a60b4eb92ea48ffd1a9e25b507000fcd4fd8152cfacb19b483feb6522610b/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f31352f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/15/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/16/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/1bdd120fc9aac257cf1a8d69af345345b340023239ae2dad37d3395475ea7be4/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f31362f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/16/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/17/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/0af5e286384bd5f61feb676cd880e2de626590cdfe53bd65942bb97c76c13f85/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f31372f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/17/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/18/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/87a8c3b58c96aa785f9d2154880787be7d6cf8349dd9832159c41a19714ea774/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f31382f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/18/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/19/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/18d36f626a6e8920b52d9b4bfda400233c4da698a5ba8d0285f96002b50d5872/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f31392f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/19/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/20/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/dd8aff4399fa84f2c735ce9f4e51169c64b3d9c618b7dc52e8037d1994cf58fa/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f32302f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/20/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/21/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/c1f12a75b97b68295c7ebccb8f4b5693b350759160acf8579375eab46e33a5e2/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f32312f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/21/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/22/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/e8da24f1273495b0710709880c072b0fa5818b0ae717c2d619e73dd190520bc6/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f32322f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/22/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/23/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/0bfbeb8040c528c50ef56e8422c22015ef1967413c63ae11a3246a1a7f0be48a/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f32332f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/23/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/24/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/615a5211c5e476e53e850ba3204e6a6891c5dc3df61f58aaa3637ef8de9b1ec3/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f32342f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/24/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/25/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/a1f0e4701d5dea8df8d9dd179a1bba9b7bd122037c3c69022383c1f46647af71/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f32352f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/25/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/26/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/136baf60d998408d4a5875bb3b85d82c005fdc3f77fbfbb247e5c7b61e994268/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f32362f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/26/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/27/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/37580ea605d98be5221047793511aefdf98f26189dc9292c8760d6b1e92331ea/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f32372f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/27/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/28/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/ac5982c9a453bf05ddcc03838c2d4391ead48c5cf3985c31c2d061f1d4f2972b/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f32382f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/28/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/backer/29/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/bb87e4700ade5b35125cb2d69fef51eebc8ebc7050499166af5cbb1d73842e2d/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f6261636b65722f32392f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/backer/29/avatar.svg\" style=\"max-width: 100%;\"></a></p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-sponsors\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#sponsors\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Sponsors</h3>\n<p dir=\"auto\">Become a sponsor and get your logo on our README on Github with a link to your site. [<a href=\"https://opencollective.com/redux-saga#sponsor\" rel=\"nofollow\">Become a sponsor</a>]</p>\n<p dir=\"auto\"><a href=\"https://opencollective.com/redux-saga/sponsor/0/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/c0090a48f214e99b90d4d6fc88704d79314818ad4966b73d78aeed75124a1c63/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f302f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/0/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/1/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/7da930a828140bdfb19e8a9d97f90de94382030997b3ac0e86be361fc95e100e/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f312f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/1/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/2/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/b76892951ee38fa341c7446aae9e04d3618eb6f7e9471975268c57da85d3f475/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f322f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/2/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/3/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/b28eaf5da8be780804714d26d4af381956e293d49a43da363baa1dfbf271c9c6/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f332f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/3/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/4/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/eab6357dcabf305020fed38f9792af2818d3808661a5dd079508cd6722c9e802/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f342f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/4/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/5/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/42e58f0ace04aafd6776ce922257d65ec98cf2fa3bdb85aebd11891b5f9542c9/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f352f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/5/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/6/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/acb3709514d1cfeb6872e4c1f92886e0ae9e8662459688115cffed80cb21b7ac/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f362f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/6/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/7/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/a4c5e6393432ab093e29d82157bb95304fb19e967fd5b11ce88fe52dfedceaf0/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f372f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/7/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/8/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/517b25b1a8a9703412995000ac11c90ee652d26b3842f1c5e33f25fdadba54dc/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f382f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/8/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/9/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/d17f97e08b5188e0a6a0a139b49225827b6cf2b8a8a2c75d55fc779b88c1384f/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f392f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/9/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/10/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/2bcfa7e8bb843e1e19b627a97909db3b88f5fd153945059307de804b3a032a9b/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f31302f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/10/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/11/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/e3ed8eb41ee752e69e296f3707ea385fe419a1c6a112c44870d1d4cb9caa8e6a/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f31312f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/11/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/12/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/c80eb426b234ad76b0f0cda59c228228908d1a09e7d9ef982fb5f00b794af8e4/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f31322f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/12/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/13/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/c7c9ee991e05a6848fc57b9127f9fac2646a504ab5a0befaa0d621454c8e18f3/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f31332f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/13/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/14/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/74b935babf7fa9704a6837bcee097ba916268e539468e06e19bbad0875797ef5/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f31342f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/14/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/15/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/f58b5c196cef5e1029a64fa08ee62a641af0569bd0c2c6e34644e9c45d9d04d8/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f31352f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/15/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/16/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/7c13ba2a42f64dde9fe219d4348b85388d8ffa427219dbc7f621f5396bc6bf62/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f31362f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/16/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/17/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/0d3f624cd992449f959765ae9c68afe03b42729f0b9f48270c700b7769f1f64e/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f31372f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/17/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/18/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/31c89a127ab5f0e9fbd924f6577e788165920d41d0273491d887b27e1ad5184a/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f31382f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/18/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/19/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/97129ce62141cd4e68f431021ea793b1258f0ce04fe8e6f2420a4982a46796aa/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f31392f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/19/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/20/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/36191077b4349137a569fece39681aeafeabb290301a708dd8686a15b71b68ca/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f32302f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/20/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/21/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/baa6ed15590c9d5d9abebd6f2ac469776be11d34d052dcaf9e0019a87091773f/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f32312f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/21/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/22/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/d7682b3439b59a8bf33f93588494bb36df1ae0494f5f8b3034cfe969d0b3da99/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f32322f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/22/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/23/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/117aece1740560565ccc1022d8f7cc2b5a222ed3b3367c3244026fa0b703e7a4/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f32332f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/23/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/24/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/1e8301acdf587489106f66057875159895ec4e777f99566ed58ed3ee4935e22b/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f32342f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/24/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/25/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/4fc32e73d5501b8b4e5b23d4b09d546db94769af571d13e737b35358225c1253/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f32352f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/25/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/26/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/b17e10c21420af21c78a4f15278b0674a8446af2839add8bfdc63e20e27d2373/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f32362f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/26/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/27/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/9677e985337fa5b3450b4f04affbc62438cf3812f4ab7c4e453596749a0855f2/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f32372f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/27/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/28/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/8b0d872787fd88aa5c819269443d4f39822ad9120ec4d9b3e3d79f211bd16084/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f32382f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/28/avatar.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://opencollective.com/redux-saga/sponsor/29/website\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/bcf2aafaed99682b1674e7043c9a5000d420086a49659250cd9eabf04aeca93a/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656475782d736167612f73706f6e736f722f32392f6176617461722e737667\" data-canonical-src=\"https://opencollective.com/redux-saga/sponsor/29/avatar.svg\" style=\"max-width: 100%;\"></a></p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-license\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#license\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>License</h2>\n<p dir=\"auto\">Copyright (c) 2015 Yassine Elouafi.</p>\n<p dir=\"auto\">Licensed under The MIT License (MIT).</p>\n</article>",
"loaded": true,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": [
{
"level": 1,
"text": "redux-saga",
"anchor": "redux-saga",
"htmlText": "redux-saga"
},
{
"level": 1,
"text": "Getting started",
"anchor": "getting-started",
"htmlText": "Getting started"
},
{
"level": 2,
"text": "Install",
"anchor": "install",
"htmlText": "Install"
},
{
"level": 2,
"text": "Usage Example",
"anchor": "usage-example",
"htmlText": "Usage Example"
},
{
"level": 4,
"text": "sagas.js",
"anchor": "sagasjs",
"htmlText": "sagas.js"
},
{
"level": 4,
"text": "main.js",
"anchor": "mainjs",
"htmlText": "main.js"
},
{
"level": 1,
"text": "Documentation",
"anchor": "documentation",
"htmlText": "Documentation"
},
{
"level": 1,
"text": "Translation",
"anchor": "translation",
"htmlText": "Translation"
},
{
"level": 1,
"text": "Using umd build in the browser",
"anchor": "using-umd-build-in-the-browser",
"htmlText": "Using umd build in the browser"
},
{
"level": 1,
"text": "Building examples from sources",
"anchor": "building-examples-from-sources",
"htmlText": "Building examples from sources"
},
{
"level": 3,
"text": "Counter examples",
"anchor": "counter-examples",
"htmlText": "Counter examples"
},
{
"level": 4,
"text": "counter-vanilla",
"anchor": "counter-vanilla",
"htmlText": "counter-vanilla"
},
{
"level": 4,
"text": "counter",
"anchor": "counter",
"htmlText": "counter"
},
{
"level": 4,
"text": "cancellable-counter",
"anchor": "cancellable-counter",
"htmlText": "cancellable-counter"
},
{
"level": 3,
"text": "Shopping Cart example",
"anchor": "shopping-cart-example",
"htmlText": "Shopping Cart example"
},
{
"level": 3,
"text": "async example",
"anchor": "async-example",
"htmlText": "async example"
},
{
"level": 3,
"text": "real-world example (with webpack hot reloading)",
"anchor": "real-world-example-with-webpack-hot-reloading",
"htmlText": "real-world example (with webpack hot reloading)"
},
{
"level": 3,
"text": "TypeScript",
"anchor": "typescript",
"htmlText": "TypeScript"
},
{
"level": 3,
"text": "Logo",
"anchor": "logo",
"htmlText": "Logo"
},
{
"level": 2,
"text": "Redux Saga chooses generators over async/await",
"anchor": "redux-saga-chooses-generators-over-asyncawait",
"htmlText": "Redux Saga chooses generators over async/await"
},
{
"level": 2,
"text": "Backers",
"anchor": "backers",
"htmlText": "Backers"
},
{
"level": 3,
"text": "Sponsors",
"anchor": "sponsors",
"htmlText": "Sponsors"
},
{
"level": 2,
"text": "License",
"anchor": "license",
"htmlText": "License"
}
],
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fredux-saga%2Fredux-saga"
}
},
{
"displayName": "LICENSE",
"repoName": "redux-saga",
"refName": "main",
"path": "LICENSE",
"preferredFileType": "license",
"tabName": "MIT",
"richText": null,
"loaded": false,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": null,
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fredux-saga%2Fredux-saga"
}
},
{
"displayName": "LICENSE-logo.md",
"repoName": "redux-saga",
"refName": "main",
"path": "LICENSE-logo.md",
"preferredFileType": "license",
"tabName": "License",
"richText": null,
"loaded": false,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": null,
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fredux-saga%2Fredux-saga"
}
},
{
"displayName": "SECURITY.md",
"repoName": "redux-saga",
"refName": "main",
"path": "SECURITY.md",
"preferredFileType": "security",
"tabName": "Security",
"richText": null,
"loaded": false,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": null,
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fredux-saga%2Fredux-saga"
}
}
],
"overviewFilesProcessingTime": 22.57759
}
},
"appPayload": {
"helpUrl": "https://docs.github.com",
"findFileWorkerPath": "/assets-cdn/worker/find-file-worker-32bb159cc57c.js",
"findInFileWorkerPath": "/assets-cdn/worker/find-in-file-worker-c6704d501c10.js",
"githubDevUrl": null,
"enabled_features": {
"code_nav_ui_events": false,
"copilot_conversational_ux": false,
"copilot_conversational_ux_embedding_update": false,
"copilot_popover_file_editor_header": false,
"copilot_smell_icebreaker_ux": true,
"copilot_workspace": false,
"codeview_firefox_inert": true
}
}
}
}
{
"accept-ranges": "bytes",
"cache-control": "max-age=0, private, must-revalidate",
"content-encoding": "gzip",
"content-security-policy": "default-src 'none'; base-uri 'self'; child-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com api.githubcopilot.com objects-origin.githubusercontent.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 26 Feb 2024 12:20:56 GMT",
"etag": "f64d716de39c1cffa498cf8be11247b7",
"referrer-policy": "no-referrer-when-downgrade",
"server": "GitHub.com",
"set-cookie": "logged_in=no; Path=/; Domain=github.com; Expires=Wed, 26 Feb 2025 12:20:56 GMT; HttpOnly; Secure; SameSite=Lax",
"strict-transport-security": "max-age=31536000; includeSubdomains; preload",
"transfer-encoding": "chunked",
"vary": "X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, Accept-Encoding, Accept, X-Requested-With",
"x-content-type-options": "nosniff",
"x-frame-options": "deny",
"x-github-request-id": "98B2:F162C:1F616F1:2CDABDA:65DC8228",
"x-xss-protection": "0"
}