https://github.com/pmagaz/redux-req-middleware
Redux Store middleware for fetching data using HTTP action request
https://github.com/pmagaz/redux-req-middleware
middleware redux store
Last synced: 3 months ago
JSON representation
Redux Store middleware for fetching data using HTTP action request
- Host: GitHub
- URL: https://github.com/pmagaz/redux-req-middleware
- Owner: pmagaz
- License: mit
- Created: 2017-06-29T13:53:28.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-07-04T10:32:50.000Z (almost 8 years ago)
- Last Synced: 2025-02-25T02:51:27.249Z (4 months ago)
- Topics: middleware, redux, store
- Language: JavaScript
- Homepage:
- Size: 40 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# redux-req-middleware
[](https://ci.appveyor.com/project/pmagaz/redux-req-middleware)
[](https://coveralls.io/github/pmagaz/redux-req-middleware?branch=master)
`redux-req-middleware` is a Redux store middleware for fetching data using HTTP action request.
## Table of contents
1. [Installation](#installation)
2. [Usage](#usage)
3. [Configuration](#configuration)
## Installation
You can install `redux-req-middleware` via npm. If you'll use it in a Isomorphic/Universal App i recommend you installing it as production dependency.
```
$ npm install redux-req-middleware --save
```
## Usage
In this example we define the typicall Api call using fetch:
#### api.js
```javascript
export default {
//Your api calls
fetchUsers(url) {
return fetch(url)
.then(req => req.json())
.catch(err => err)
}
}
```
Then, in your Redux action creators you can add your Api call function usign the request param of the action:
```javascript
import api from '../api';
export function getUserList(params) {
return {
type: 'USERS_REQUEST',
request: api.fetchUsers(params)
};
}
```
Request Actions handled by redux-req-middleware will dispatch a new action with a '_SUCCESS' suffix if the request was successful or '_ERROR' suffix if it was unsuccessful. Both the sucess and the error data returned will be added to the payload of the new action dispatched.
Then, in your reducer you can catch the action "USERS_SUCCESS", return the regular Redux flow
```javascript
function usersReducer(state = initialState, action) {
switch (action.type) {
case 'USERS_SUCCESS':
return { ...state, numUsers: action.numUsers };
}
...
}
```
redux-req-middleware also returns a promise with the resolved action, giving you the ability to chain actions:
```javascript
store.dispatch(actions.getUserList())
.then(action => {
//Resolved action of type 'USERS_SUCCESS'
//and the response in the payload
})
```
## Configuration
By default, redux-req-middleware uses the following suffixes for the three typicall HTTP states:
`
{
request: '_REQUEST',
success: '_SUCCESS',
error: '_ERROR'
}
`
So if you your action type is "FOO" or "FOO_REQUEST" redux-req-middleware will dispatch a "FOO_SUCCESS" or "FOO_ERROR" action type.
You can use your own suffixes using an object configuration with the same object params described before. To use `redux-req-middleware` you need to include it as a Redux Store Middleware using default suffixes configuration or custom suffixes configuration:
#### ConfigureStore.js
```js
import reduxReqMiddleware from 'redux-req-middleware';
import { createStore, applyMiddleware, combineReducers } from 'redux';
//default configuration
const ReduxReqMiddleware = reduxReqMiddleware();
//custom configuration
const ReduxReqMiddleware = reduxReqMiddleware({
request: '_CALL',
success: '_OK',
error: '_KO'
});
const store = createStore(
rootReducer,
compose(
applyMiddleware(ReduxReqMiddleware)
)
)
```
## Projects using redux-req-middleware
- [react-base](https://github.com/atSistemas/react-base/ (atSistemas React/Redux Isomorphic Platform)
## License
MIT