Redux RSAA Middleware

Redux middleware for handling API-calling actions.

Table of Contents

• Introduction
• Installation
• Usage
• Contribute to the Project
  • Initialize the Project
  • Available Scripts
    • npm start
    • npm run build:dev
    • npm run build:prod
    • npm run flow
    • npm run flow-typed-install
    • npm run initialize-project
    • npm run lint:fix
    • npm run lint:log
    • npm run precommit
    • npm run serve:dev
    • npm run serve:prod
    • npm run test

Introduction

This middleware intercepts and handles actions of type 'RSAA' and forwards to the next middleware actions of any other type.

Installation

To install this package, run:

npm install redux-rsaa-middleware --save

Usage

The middleware can be applied to your Redux store by including the following code in the entry point of your project (for example index.jsx)
Notice that topReducer and initialState need to be defined within your project.

import { createStore, applyMiddleware } from 'redux';
import { RSAAMiddleware } from 'redux-rsaa-middleware';
import topReducer from './reducers';
import initialState from './initialState';

const createStoreWithMiddleware = applyMiddleware(RSAAMiddleware)(createStore);
const configureStore = initState =>
  createStoreWithMiddleware(topReducer, initState);
const store = configureStore(initialState);

The middleware will intercept and handle actions of type 'RSAA', which must respect the following type definition:

{
  type: 'RSAA',
  payload: {
    method?: string,
    path?: string,
    body?: Object,
    headers?: Object,
    query?: string | Object,
    error?: Object,
    errorTime?: string,
    response?: Object,
    failureAction?: Action,
    finishedSendingAction?: Action,
    startedSendingAction?: Action,
    successAction?: Action,
  },
};

When such an action is dispatched, the middleware will attempt to send a request using the values of the payload properties method, path and query, and dispatch during the process the actions contained in the following properties:

• startedSendingAction

  Is dispatched to let the store know that the process has started.
  If no value is given to this property, a default action is dispatched, which has type 'API_CALL_STARTED_SENDING', and empty payload.

• successAction

  Is dispatched if the request is successful, to let the store know that the request was successful.
  The response is inserted into the payload as value of the property response.
  If no value is given to successAction, a default action is dispatched, which has type 'API_CALL_SUCCESS', and payload as follows:

  {
    response: Object
  }

• failureAction

  Is dispatched if the request fails, to let the store know that the request failed.
  If no value is given to this property, a default action is dispatched, which has type 'API_CALL_FAILURE', and payload as follows:

  {
    error: Object,
    errorTime: string,
  }

• finishedSendingAction

  Is dispatched to let the store know that the process has ended.
  If no value is given to this property, a default action is dispatched, which has type 'API_CALL_FINISHED_SENDING', and empty payload.

Contribute to the Project

• Initialize the Project

  In order to install the dependencies needed by this project and the types needed to perform static type checking with flow, run the following command from within the project directory:
  npm run initialize-project

• Available Scripts

  In the project directory, you can run:

  • npm start

    Alias for npm run serve:dev.

  • npm run build:dev

    Runs all tests, linting and static type checking, then creates a development build of the app.
    The resulting build can be found in the directory "build_dev".

  • npm run build:prod

    Runs all tests, linting and static type checking, then creates a production build of the app.
    The resulting build can be found in the directory "build_prod".

  • npm run flow

    Performs statyc type checking on all files annotated with "// @flow".

  • npm run flow-typed-install

    Installs available flow types for all project dependencies. Creates stub flow types of type "any" when flow types are not available.

  • npm run initialize-project

    Runs npm install to install all the npm dependencies, and then npm run flow-typed-install.

  • npm run lint:fix

    Runs eslint on all files within the project, as specified in .eslintrc.json and .eslintignore.
    Fixes the problems found.

  • npm run lint:log

    Runs eslint on all files within the project, as specified in .eslintrc.json and .eslintignore.
    Logs the results.

  • npm run precommit

    Runs all tests, formatting, linting and static type checking.
    It is run automatically by husky on git commit.

  • npm run serve:dev

    Runs all tests, linting and static type checking, then builds and runs the app in development mode.
    Open http://localhost:3000 to view it in the browser.
    The page will reload if you make edits.
    You will also see any lint errors in the console.

  • npm run serve:prod

    Runs all tests, linting and static type checking, then builds and runs the app in production mode.
    Open http://localhost:3000 to view it in the browser.

  • npm run test

    Finds all files with extension ".test.js" and ".test.jsx" within the project and runs the tests they contain.