snapsheet-redux-helpers

Helpers to reduce boilerplate with redux.

Installation

$ npm install snapsheet-redux-helpers --save

or with yarn

$ yarn add snapsheet-redux-helpers

Api middleware

Using the api middleware reduces boilerplate for async actions. Instead of writing actions for your apis like this:

export function login(username, password) {
  return (dispatch, getState) => {
    dispatch({ type: 'LOGIN' });
    return postJSON('/api/v1/login', { username, password }).then(
      (data) => {
        dispatch({ type: 'LOGIN_SUCCESS', result: data });
        return data;
      },
      (error) => {
        // handle error
        dispatch({ type: 'LOGIN_ERROR', error: error })
        return Promise.reject(error);
      }
    );
  }
}

You can write them like this with the use of AjaxAction:

export function login(username, password) {
  return new AjaxAction('LOGIN')
    .call((apiClient) => apiClient.postJSON('/api/v1/login', { username, password }))
    .toReduxAction();
}

Setting up api middleware

import { createApiMiddleware } from 'snapsheet-redux-helpers';

You can also minimize the bundle by importing only the files you need

import createApiMiddleware from 'snapsheet-redux-helpers/lib/createApiMiddleware';

const middleware = [
  createApiMiddleware(ApiClient)
];
 
const store = createStore(rootReducer, composeEnhancers(
  applyMiddleware(...middleware)
));

NOTE: you will need an ApiClient model to use. See SampleApiClient for an example of how it could be setup. It should accept dispatch, getState in the constructor, but the rest is up to you! This allows you to generalize what happens whenever an ajax call is made, such as beginning a loading indicator, displaying flash messages when an error occurs, or automatically adding params to requests. It also gives you the freedom to use other libraries to make your requests. The only limitation is that each action should return a Promise.

See demo/index.js for more example usage.

Demo

$ git clone https://github.com/bodyshopbidsdotcom/redux-helpers.git
$ cd redux-helpers
$ npm install
$ npm run demo
$ open http://localhost:3000

Contributing

Please create an issue with any feature suggestions or bug reports. Pull requests are welcome.