robs-fetch v0.2.0
Redux-Observable fetch (robs-fetch)
Redux-observable fetch (robs-fetch) is a set of redux actions as well as an Epic to allow you to make REST requests easily in a redux-observable setup.
It standardise the approach one may use to make fetch requests in an elegant fashion.
Building the project
- Perform an
npm install
oryarn install
- Run
npm run build
to build the project. - Enjoy!
All tests will be run as part of the build.
Roadmap
- Setup tests using Jest.
- Create a basic
fetchEpic
. - Create options for
fetchEpic
. - Introduce the concept of busy action.
- Allow to define options on a per-request basis.
- Ability to define custom serializers.
How to install in your project
npm install robs-fetch --save
or
yarn add robs-fetch
How to setup
- Follow the
redux-observable
documentation for setting up the middleware. - Import the
restEpic
from therobs-fetch
package.
var restEpic = require('robs-fetch').restEpic;
ES6 Modules
import { restEpic } from 'robs-fetch';
- Insert the
restEpic
in therootEpic
.
const rootEpic = combineEpics(
pingEpic,
restEpic
);
Advanced setup
The standard setup is quick and easy for simple cases. However, in real apps, you'll probably need more advanced options. These options can be set up at the epic construction for a global effect on all fetch requests. In a near future, you'll be able to set some options for a single request. Here is how to set it up.
import { createRestEpic } from 'robs-fetch';
import { combineEpics, createEpicMiddleware } from 'redux-observable';
const fetchEpic = createRestEpic(options);
// Apply epic to the redux-observable middleware (see redux-observable documentation).
Available Options
credentials
: Strategy for the credentials (cookies). See fetch documentation for possible values.headers
: An object containing the header values.
Typescript typings
The Typescript typings are included inside the module. No need for external typings.
How to dispatch an action
- Import the
restActions
from therobs-fetch
module.
var restActions = require('robs-fetch').restActions;
ES6 Modules
import { restActions } from 'robs-fetch';
- Create an action using the
restActions
.
const action = restActions.fetchPost({
url: 'path/to/resource',
onCompleteAction: 'ACTION_TO_DISPATCH_WHEN_COMPLETE',
body: {
// Object to send in the body of the Request (when available).
}
});
- Dispatch the action in the redux store.
store.dispatch(action);
- Setup a reducer to handle the response.
const reducer = (state, action) => {
if (action.type === 'ACTION_TO_DISPATCH_WHEN_COMPLETE') {
// Alter state here.
return newState;
}
return state;
};
Examples
Examples of usage for robs-fetch
can be found under the samples folder.
License
MIT License. See LICENSE file for more details.