redux-sagas-async
redux-sagas-async
is an alternative and simplified version of redux-saga using await/async instead of generators.
Getting started
Install
$ npm install redux-sagas-async
API
takeEvery
: Add listener for the specific action.dispatch
: Redux dispatch function.select
: Function to select the data from the store (receives state as argument).delay
: Promise to add a delay in ms: Ex to wait 1 second:await delay(1000);
.
Usage Example
The usage is very similar with the redux-saga, but replacing the generators with async functions and the call of Promises with await
instead of yield
:
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.)
Component ... { const userId dispatch = thisprops } ...
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
// worker Saga: will be fired on USER_FETCH_REQUESTED actionsconst fetchUser = { try const user = await Api; ; catch e ; } /* Starts fetchUser on each dispatched `USER_FETCH_REQUESTED` action. Allows concurrent fetches of user.*/ = { ;}
To run our Saga, we'll have to connect it to the Redux Store using the redux-sagas-async
middleware.
main.js
;; ;; // create the saga middlewareconst sagaMiddleware = ; // mount it on the Storeconst store = ; // render the application