Gathering detailed insights and metrics for @redux-saga/types
Gathering detailed insights and metrics for @redux-saga/types
Gathering detailed insights and metrics for @redux-saga/types
Gathering detailed insights and metrics for @redux-saga/types
An alternative side effect model for Redux apps
npm install @redux-saga/types
redux-saga@1.3.0
Published on 02 Jan 2024
@redux-saga/core@1.3.0
Published on 02 Jan 2024
@redux-saga/core@1.2.3
Published on 17 Mar 2023
redux-saga@1.2.3
Published on 17 Mar 2023
redux-saga@1.2.2
Published on 09 Dec 2022
@redux-saga/core@1.2.2
Published on 09 Dec 2022
Module System
Unable to determine the module system for this package.
Min. Node Version
Typescript Support
Node Version
NPM Version
22,538 Stars
1,944 Commits
1,974 Forks
249 Watching
16 Branches
322 Contributors
Updated on 29 Nov 2024
JavaScript (82.37%)
TypeScript (16.18%)
SCSS (1.05%)
CSS (0.4%)
Cumulative downloads
Total Downloads
Last day
-9.5%
156,847
Compared to previous day
Last week
-1.7%
857,325
Compared to previous week
Last month
7.6%
3,751,846
Compared to previous month
Last year
0.7%
42,466,966
Compared to previous year
No dependencies detected.
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.
1$ npm install redux-saga
or
1$ yarn add redux-saga
Alternatively, you may use the provided UMD builds directly in the <script>
tag of an HTML page. See this section.
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.)
1class UserComponent extends React.Component { 2 ... 3 onSomeButtonClicked() { 4 const { userId, dispatch } = this.props 5 dispatch({type: 'USER_FETCH_REQUESTED', payload: {userId}}) 6 } 7 ... 8}
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
1import { call, put, takeEvery, takeLatest } from 'redux-saga/effects' 2import Api from '...' 3 4// worker Saga: will be fired on USER_FETCH_REQUESTED actions 5function* fetchUser(action) { 6 try { 7 const user = yield call(Api.fetchUser, action.payload.userId) 8 yield put({ type: 'USER_FETCH_SUCCEEDED', user: user }) 9 } catch (e) { 10 yield put({ type: 'USER_FETCH_FAILED', message: e.message }) 11 } 12} 13 14/* 15 Starts fetchUser on each dispatched `USER_FETCH_REQUESTED` action. 16 Allows concurrent fetches of user. 17*/ 18function* mySaga() { 19 yield takeEvery('USER_FETCH_REQUESTED', fetchUser) 20} 21 22/* 23 Alternatively you may use takeLatest. 24 25 Does not allow concurrent fetches of user. If "USER_FETCH_REQUESTED" gets 26 dispatched while a fetch is already pending, that pending fetch is cancelled 27 and only the latest one will be run. 28*/ 29function* mySaga() { 30 yield takeLatest('USER_FETCH_REQUESTED', fetchUser) 31} 32 33export default mySaga
To run our Saga, we'll have to connect it to the Redux Store using the redux-saga
middleware.
main.js
1import { createStore, applyMiddleware } from 'redux' 2import createSagaMiddleware from 'redux-saga' 3 4import reducer from './reducers' 5import mySaga from './sagas' 6 7// create the saga middleware 8const sagaMiddleware = createSagaMiddleware() 9// mount it on the Store 10const store = createStore(reducer, applyMiddleware(sagaMiddleware)) 11 12// then run the saga 13sagaMiddleware.run(mySaga) 14 15// render the application
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:
1var 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:
1import 'regenerator-runtime/runtime' 2// then 3import sagaMiddleware from 'redux-saga'
1$ git clone https://github.com/redux-saga/redux-saga.git 2$ cd redux-saga 3$ yarn 4$ npm test
Below are the examples ported (so far) from the Redux repos.
There are three counter examples.
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.
Demo using webpack
and high-level API takeEvery
.
1$ npm run counter 2 3# test sample for the generator 4$ npm run test-counter
Demo using low-level API to demonstrate task cancellation.
1$ npm run cancellable-counter
1$ npm run shop 2 3# test sample for the generator 4$ npm run test-shop
1$ npm run async 2 3# test sample for the generators 4$ npm run test-async
1$ npm run real-world 2 3# sorry, no tests yet
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.
You can find the official Redux-Saga logo with different flavors in the logo directory.
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.
Support us with a monthly donation and help us continue our activities. [Become a backer]
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]
Copyright (c) 2015 Yassine Elouafi.
Licensed under The MIT License (MIT).
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 20/25 approved changesets -- score normalized to 8
Reason
security policy file detected
Details
Reason
1 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 1
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
147 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More