Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sonmezonur/redux-rest-middleware
Fully customizable REDUX middleware for async actions
https://github.com/sonmezonur/redux-rest-middleware
Last synced: 7 days ago
JSON representation
Fully customizable REDUX middleware for async actions
- Host: GitHub
- URL: https://github.com/sonmezonur/redux-rest-middleware
- Owner: sonmezonur
- Created: 2018-06-23T18:38:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-16T21:23:18.000Z (almost 6 years ago)
- Last Synced: 2025-01-24T04:32:44.379Z (13 days ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
redux-rest-middleware
---
Fully customizable REST middleware with zero dependency for your redux apps.
Usage
===
- Setting up basic configuration before attaching middleware to redux store
```javascript
import { applyMiddleware, createStore } from 'redux'
import restMiddleware from '@sonmezonur/redux-rest-middleware'
const apiSettings = {
baseURL: process.env.REQUEST_URL,
headers: {
'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
},
params: {
apiKey: process.env.API_KEY
}
}
const store = createStore(
reducers,
initialState,
applyMiddleware(restMiddleware(apiSettings))
)
```
- Action
```javascript
const getAction = (id) => {
return {
fetch: {
method: 'GET', // or 'POST', 'PUT', 'DELETE', 'PATCH'
endpoint: `/actions/${id}`,
types: {
request: 'FETCH_ACTION', // must
success: 'FETCH_ACTION_SUCCESS', // optional
failure: 'FETCH_ACTION_FAILURE' // optional
},
onSuccess: (response) => {
// handle response on success
},
onError: (err) => {
// handle error
}
}
}
}
```
- Reducer
```javascript
const actionHandler = (state, { type, payload }) => {
switch (type) {
case 'FETCH_ACTION':
return {
...state,
isFetching: true
}
case 'FETCH_ACTION_SUCCESS':
return {
...state,
isFetching: false,
payload: payload
}
case 'FETCH_ACTION_FAILURE':
return {
...state,
error: payload
}
}
}
```
- Fetch Parameters
- `method`: Request Type - 'GET', 'DELETE', 'POST', 'PATCH', 'PUT'
- `endpoint`: Request source
- `params`: Query params for the request(on JSON format)
- `types`: Action types - 'request'(must), 'success', 'failure'
- `onSuccess`: Function to handle successful requests
- `onFailure`: Function to handle error responses