gofish
v0.1.7
Published
async wrapper around api calls with axios for use with redux.
Downloads
2
Readme
gofish
async wrapper around api calls with axios for use with redux.
motivation
i wanted to reduce the amount of boilerplate code i had to write for api calls in redux actions, but i didn't want to rely on redux middleware so i could write explicit action side effects.
this package exposes 4 methods: instance
, apiRequest
, handleError
, and apiReducer
.
usage
tl;dr check out the example
instance
you need to expose your api using the instance
method.
instance
accepts your prod api url and a dev api url.
import { instance } from 'gofish'
const api = instance("https://prod.myapi.com", "http://localhost:5000")
export default api
apiRequest
and handleError
apiRequest
is used to make async api calls in your redux actions. you must pass your api instance, dispatch, request type, and the following options: actionType, and endpoint. actionType refers to the prefix or suffix of your action creators-- e.g. if your action creator is FETCH_ITEMS
, you would just put ITEMS
for actionType. this actionType should also be passed to the handleError
method.
import { apiRequest, handleError } from 'gofish'
import api from './api'
const fetchItems = () => async dispatch => {
try {
const response = await apiRequest(api, dispatch, "get", {
actionType: 'ITEMS',
endpoint: '/items'
})
return Promise.resolve(response)
} catch (err) {
await handleError(dispatch, err, 'ITEMS')
}
}
apiReducer
The api reducer handles the REQUEST
and ERROR
states of the api call. In order for this to work properly, you must write your action creators using the request/success/error tuple as a suffix, i.e. ITEMS_REQUEST
, ITEMS_SUCCESS
, ITEMS_ERROR
. This reducer exposes REQUEST
and ERROR
globally, so you can access them at any time (useful for loading spinners or popup error messages).
Simply add the reducer to your root reducer.
import { combineReducers } from 'redux'
import { apiReducer } from 'gofish'
import someReducer from './somewhere'
const rootReducer = combineReducers({
api: apiReducer,
something: someReducer
})
API
instance
Creates an axios instance with your prod and dev API urls.
const api = instance("https://api.mysite.com", "http://localhost:5000")
apiRequest
Async wrapper around api calls w/ axios.
api
: The api created using the instance
method
dispatch
: redux's dispatch method
options
requestType
: The type of API call to make- 'get', 'post', 'put', 'patch', 'del'
actionType
: The prefix or suffix of your action creator-- e.g. remove the request/success/error tuple. REQUEST_ITEMS
would become ITEMS
.
endpoint
: The api endpoint to hit, prefixed with a backslash.
apiRequest(api, dispatch, {
requestType: 'get',
actionType: 'ITEMS',
endpoint: '/items'
})
handleError
Async wrapper around error handling
err
: The passed error
dispatch
: redux's dispatch method
actionType
: The prefix or suffix of your action creator.
handleError(err, dispatch, 'ITEMS')
Related / Shoutouts
Inspired by methods used in mkrn-starter
init'd with golf