Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jacklam718/redux-network-middleware
Redux communication middleware for handling api call and response.
https://github.com/jacklam718/redux-network-middleware
es6 redux redux-middleware redux-network-middleware
Last synced: 5 days ago
JSON representation
Redux communication middleware for handling api call and response.
- Host: GitHub
- URL: https://github.com/jacklam718/redux-network-middleware
- Owner: jacklam718
- Created: 2018-01-16T15:39:05.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-10T18:08:15.000Z (almost 7 years ago)
- Last Synced: 2024-10-28T12:08:39.781Z (16 days ago)
- Topics: es6, redux, redux-middleware, redux-network-middleware
- Language: JavaScript
- Homepage:
- Size: 64.5 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Redux Network Middleware
A redux network middleware for handling api call and response.
### Installation
`yarn add redux-network-middleware`
### Usage - Api Middleware
```javascript
import { applyMiddleware, createStore } from 'redux';
// api middleware with default api client
import { apiMiddleware } from 'redux-network-middleware'
const store = createStore(
reducer,
applyMiddleware(apiMiddleware),
);
```
Or you can create your own network middleware with custom
```javascript
import { applyMiddleware, createStore } from 'redux';
// api middleware with custom api client
import { apiMiddlewareFactory } from 'redux-network-middleware'
const api = (options) => {
return fetch(options)
}
const store = createStore(
reducer,
applyMiddleware(apiMiddlewareFactory(api)),
);
```
### Example - Basic
#### Import
```javascript
import { API_GET, asyncActionType } from 'redux-network-middleware';
```
#### Constant
```javascript
// create a async action type
const FETCH_USER_PROFILE = asyncActionType('FETCH_USER_PROFILE');
```
#### Action
```javascript
const fetchUserProfile = (id) => ({
type: API_GET,
payload: {
endpoin: 'https://example.com/user/',
data: {
id,
},
next: FETCH_USER_PROFILE,
},
});
```
#### Reducer
```javascript
const initState = {
error: null,
pending: false,
};
const user = (state = initState, action) => {
switch (action.type) {
case FETCH_USER_PROFILE.PENDING: {
return {
pending: true,
};
}
case FETCH_USER_PROFILE.SUCCESS: {
return {
...action.payload,
pending: false,
};
}
case FETCH_USER_PROFILE.ERROR: {
return {
error: action.payload,
pending: false,
};
}
default:
return state;
}
};
```