Axios Actions

Overview

Axios Actions simplifies the architecture of API-heavy applications.

In a Vue application for example, it moves API calls away from Vuex to small, configurable, instantiatable and transferable services.

Background

Working at Clear Bank we had a large internal Vue-based system with probably 100s of global stores.

With application state being entirely driven by the API, all major components required tight coupling to a Vuex store, with associated folders, boilerplate, setup, naming, wiring, etc.

Turning the idea of "all actions must go through the store" on its head, Axios Actions allows groups of related API calls to be repackaged from global store actions, to locally configured, self-contained units, with data delivered locally or globally as required.

Implementation

The library comprises a small set of classes which collate URLs or URL request configs as callable actions.

First, define actions and endpoints:

const actions = {
  search: 'products/widgets?category=:category',
  update: 'POST products/widgets/:id',
  delete: 'DELETE products/widgets/:id',
}
JavaScript

Then, encapsulate as a choice of built-in services:

const widgets = new ApiGroup(axios, actions)
JavaScript

Optionally add plugins or event handlers:

widgets
  .use('data')
  .when('update delete', event => console.log('something changed', event))
  .fail(error => console.log('the request failed', error))
JavaScript

Finally, call actions using object methods:

widgets
  .search('blue')
  .then(data => {
    console.log(data)
  })
JavaScript

This service-based approach:

  • removes brittle configuration from components and stores
  • encapsulates additional logic (such as load state and handlers) within the service
  • ensures application code stays simple and semantic
  • provides a dedicated layer for API interaction

There are lots of other goodies in the library which take the drudgery out of working with APIs!