@georapbox/redux-call-api-middleware

Redux middleware to perform api calls reducing action creators boilerplate

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
30Oct 26, 2020May 13, 2018Minified + gzip package size for @georapbox/redux-call-api-middleware in KB

Readme

npm version Travis Codecov Dependencies devDependency Status npm license

redux-call-api-middleware

Redux middleware to perform api calls reducing action creators boilerplate

This is a slight modification of the example found in Redux docs.

Install

$ npm install @georapbox/redux-call-api-middleware

Usage

After passing it once to applyMiddleware(...middlewares), you can write all your API-calling action creators the following way:

export function loadPosts(userId) {
  return {
    // Types of actions to emit before and after (required)
    types: {
      requestType: 'LOAD_POSTS_REQUEST',
      successType: 'LOAD_POSTS_SUCCESS',
      failureType: 'LOAD_POSTS_FAILURE'
    },

    // Check the cache (optional); defaults to `() => true`
    shouldCallAPI: state => !state.posts[userId],

    // Perform the fetching (required)
    callAPI: (dispatch, state) => fetch(`http://myapi.com/users/${userId}/posts`),

    // Arguments to inject in begin/end actions (optional); defaults to `{}`
    payload: { userId },

    // Callback function to be executed after `requestType` is dispatched (optional); defaults to `() => {}`
    onRequestDispatched: (payload, dispatch, state) => {
      // Do something when `requestType` is dispatched
    },

    // Callback function to be executed after `successType` is dispatched (optional); defaults to `() => {}`
    onSuccessDispatched: (response, payload, dispatch, state) => {
      // Do something when `successType` is dispatched
    },

    // Callback function to be executed after `failureType` is dispatched (optional); defaults to `() => {}`
    onFailureDispatched: (error, payload, dispatch, state) => {
      // Do something when `failureType` is dispatched
    }
  }
}

License

The MIT License (MIT)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.