webapps-react-middleware

Library of Middleware for React-Redux applications

Install

npm i --save webapps-react-middleware

Usage

Import the API middleware and apply it when creating your store through redux:

// store.js
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import { apiMiddleware } from 'webapps-react-middleware';
import reducers from './reducers'

const store = createStore(
  reducers,
  applyMiddleware(
    thunk,
    apiMiddleware,
  ),
);

export default store;

When creating your actions, you need to import the CALL_API symbol, and provide it the following:

• a type array of the form [request_constant, success_constant, failure_constant].
• an endpoint string (this is the endpoint where fetch will make the GET / POST request)
• a request object which will be passed to fetch. Any options such as body, methods (default is GET), headers, etc can be set here
• this middleware will also attach any JWT as an authorization header stored in localstorage under the key 'authToken'
• the middlware returns actions to your reducers with a response value if successful or an error value if it fails

Example Usage:

// actions.js
import { CALL_API } from 'webapps-react-middleware';
import { API_ENDPOINT } from '../../endpoints/guestCheckout';
import { REQUEST_CONSTANT, SUCCESS_CONSTANT, FAILURE_CONSTANT } from './constants.js';

export function (request) {
  return (dispatch) => dispatch({
    [CALL_API]: {
      type: [REQUEST_CONSTANT, SUCCESS_CONSTANT, FAILURE_CONSTANT],
      endpoint: API_ENDPOINT,
      request: {
        method: 'POST',
        body: JSON.stringify(request),
        headers: {
          'x-amz-meta-test': 'test',
        }
      },
    },
  });
}

// reducer.js
import { REQUEST_CONSTANT, SUCCESS_CONSTANT, FAILURE_CONSTANT } from './constants.js';

export default function (state, action) {
  switch (action.type) {
    case SUCCESS_CONSTANT:
      return {
        ...state,
        ...action.response, // response from fetch
      };
    case FAILURE_CONSTANT:
      return {
        ...state,
        error: ...action.error, // error message from fetch
      }
    case REQUEST_CONSTANT:
    case default:
      return state;
  }
}