georapbox / redux-call-api-middleware

Redux middleware to perform api calls reducing action creators boilerplate

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)

redux-call-api-middleware's Issues

When shouldCallAPI() returns false it should resolve instead of returning undefined (discussion)

// actions.js

export function loadPosts(userId) {
  return {
    types: {
      requestType: 'LOAD_POSTS_REQUEST',
      successType: 'LOAD_POSTS_SUCCESS',
      failureType: 'LOAD_POSTS_FAILURE'
    },
    shouldCallAPI: state => false,
    callAPI: (dispatch, state) => fetch(`http://myapi.com/users/${userId}/posts`),
    payload: { userId }
  }
}

// MyComponent.js

import React from 'react';
import { connect } from 'react-redux';
import { loadPosts } from './actions.js';

const MyComponent = props => {
  props.loadUserPosts('12345').then(res => {
    console.log(res);
  });
};

const mapDispatchToProps = dispatch => ({
  loadUserPosts: userId => dispatch(loadPosts(userId))
});

export default connect(null, mapDispatchToProps)(MyComponent);

In the example above, shouldCallAPI() returns false. Now when I call loadUserPosts and chain with a.then handler it will throw a TypeError because the middleware returns undefined. The conclusion is that when shouldCallAPI() is used and I need to chain I must always check if the returned result is undefined.

 const userPosts = props.loadUserPosts('12345');

if (userPosts) {
  userPosts.then(res => {
    console.log(res);
  });
}

Possible solutions:

• The middleware could return Promise.resolve() when shouldCallAPI() is false instead of undefined. This way chaining would not lead to error.

Update dependecies

Update all dev dependencies and refactor build processes to comply with Babel 7.