Fully customizable REST middleware with zero dependency for your redux apps.
- Setting up basic configuration before attaching middleware to redux store
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
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
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 sourceparams
: Query params for the request(on JSON format)types
: Action types - 'request'(must), 'success', 'failure'onSuccess
: Function to handle successful requestsonFailure
: Function to handle error responses