@rstone770/rebatch

Rebatch

Add batching middleware, enhancer, and action creator

npm install ---save @rstone770/rebatch

Why?

Sometimes you might need to group several actions in a single dispatch. This might be done to improve performance in react if your are dispatching several actions at a time that might cause several store notifications. This might also be used to improve semantics were an action might be composed of many smaller actions, but should be dispatched as one.

Special care should be taken to insure that batched actions do not rely on store side effects of the previous actions in the batch.

Below is an example of incorrect usage.

import * as batching from '@rstone770/rebatch';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

const reducer = (state = '', action) => {
  switch(action.type) {
    case 'SET_NAME':
      return action.name;
    default:
      return state;
  }
};

const store = createStore(
  reducer,
  compose(
    applyMiddleware(thunk, batching.middleware),
    batching.enhancer
  )
);

// The second action is a thunk that relies on store state side effects which will not exist until the batch is executed.
store.dispatch(
  batch(
    { type: 'SET_NAME', name: 'brenden' },
    (dispatch, getState) => {
      if (getState() === 'brenden') {
        // do something else.
      }
    }
  )
);

Installation

npm install --save @restone770/rebatch

After installation, you'll have to enable batching support.

import * as batching from '@rstone770/rebatch';
import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';

const store = createStore(
  reducer,
  compose(
    applyMiddleware(batching.middleware),
    batching.enhancer
  )
);

Usage

After the store is configured, simply use the batch action creator to perform batch actions.

import * as batching from '@rstone770/rebatch';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

const store = createStore(
  reducer,
  compose(
    applyMiddleware(batching.middleware, thunk),
    batching.enhancer
  )
);

const batch = batching.batch,
  dispatch = store.dispatch;

// fires single store notification.
store.dispatch(
  batch(
    { type: 'ADD_TODO', id: '0' },
    { type: 'SOME_OTHER_ACTION' }
  )
);

// Rebatch supports complex and nested batch action types.
store.dispatch(
  batch(
    { type: 'COMPLETE_TODO', id: '0' },
    (dispatch, getState) => {
      dispatch({ type: 'SOME_OTHER_ACTION' });
    },
    batch([/* some other batch */])
  )
);

// Batch results are returned after dispatch.
const [
  promise
] = store.dispatch(
  batch(
    { type: 'COMPLETE_TODO', id: '0' },
    (dispatch, getState) => {
      return new Promise((resolve) => {
        setTimeout(() => resolve(), 500);
      });
    }
  )
);

promise.then(() => console.log('promise!!!11!'));

License

MIT