async-api-request

async-api-request

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 'async-api-request'

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, and the following options: requestType, 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 'async-api-request'
import api from './api'

const fetchItems = () => async dispatch => {
  try {
    const response = await apiRequest(api, dispatch, {
      requestType: '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 'async-api-request'
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