redux-saga-requests-fetch v0.10.0
redux-saga-requests-fetch
Fetch API driver to Redux-Saga - addon to simplify handling of AJAX requests.
Installation
To install the package, just run:
$ yarn add isomorphic-fetch redux-saga-requests-fetch
or...
$ npm install isomorphic-fetch redux-saga-requests-fetch
or you can just use CDN: https://unpkg.com/redux-saga-requests-fetch
.
Usage
For a general usage, see redux-saga-requests docs.
Regarding Fetch API related usage, here you can see a typical setup:
import 'isomorphic-fetch'; // or a different fetch polyfill
import { handleRequests } from 'redux-saga-requests';
import { createDriver } from 'redux-saga-requests-fetch';
handleRequests({
driver: createDriver(
window.fetch,
{
baseURL: 'https://my-domain.com' // optional - it works like axios baseURL, prepending all relative urls
AbortController: window.AbortController, // optional, if your browser supports AbortController or you use a polyfill like https://github.com/mo/abortcontroller-polyfill
}
),
});
And in order to create Fetch API requests, below:
fetch('/users', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
},
});
should be translated to this:
const fetchUsers = () => ({
type: 'FETCH_USERS',
request: {
url: '/users/',
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
},
}
});
The point is, you can use the same request config like you do with pure Fetch API, but you need to pass url
in the
config itself. Also, one additional parameter you could provide in the config is responseType
, which is set as json
as the default. Available response types are: 'arraybuffer'
, 'blob'
, 'formData'
, 'json'
, 'text'
, or null
(if you don't want a response stream to be read for the given response).
Also, this driver reads response streams automatically for you (depending on responseType
you choose)
and sets it as response.data
, so instead of doing response.json()
, just read response.data
.
Licence
MIT