Repository files navigation

Store enhancer forredux, which allows single trigger ofsubscriptions after a bunch of actions.

npm install --save redux-batch-actions-enhancer

To add batch feature, simply provide enhancer as third parameter to redux, then you can use thebuilt-in helper functioncreateAction to generate a batch action containing all the actionsgiven in parameters:

import{createStore}from'redux';import{batch,createAction}from'redux-batch-actions-enhancer';conststore=createStore(reducer,initialState,batch().enhancer);constactionA={type:'A'};constactionB={type:'B'};store.dispatch(createAction(actionA,actionB));

Notice thatbatch is a function returnsenhancer which can be used in creating store. This mightbe helpful if there are more than one redux instance inside the app.

If you have any middleware, you can use the redux built-in functioncompose to combine theseenhancers together:

import{createStore,applyMiddleare,compose}from'redux';import{batch,createAction}from'redux-batch-actions-enhancer';importcreateLoggerfrom'redux-logger';constlogger=createLogger();conststore=createStore(reducer,initialState,compose(batch().enhancer,applyMiddleware(logger)),);store.dispatch(createAction(actionA,actionB));

One thing to mention is that afterenhancer, the batch actions will be decomposed and sent tomiddleware one by one. As a result, you should see redux-logger outputactionA andactionBseparately.

If your middleware also generates batch actions, you will need to add another middleware after itto decompose it:

import{createStore,applyMiddleware,compose}from'redux';import{batch,createAction}from'redux-batch-actions-enhancer';importpromisefrom'redux-promise';importcreateLoggerfrom'redux-logger';constlogger=createLogger();const{ enhancer, middleware}=batch();conststore=createStore(reducer,initialState,compose(enhancer,applyMiddleware(promise,middleware,logger)),);store.dispatch(newPromise(resolve=>resolve(createAction(actionA,actionB))));

In the example above, redux-promise might generate new batch action. To ensure that it will be wellhandled by following middleware and reducers, the built-inmiddleware needs to be added after. Thisway, redux-logger can outputactionA andactionB separately.

Notice that bothenhancer andmiddleware should be from samebatch() return, otherwise they mightnot share the same local state and cause unintentional issues.

When using redux, I personally prefer to create many "atom" actions, each represents a specificmodification of state. However, in real world, a user's action might cause a combination of many"atom" actions. If all those "atom" actions are sent one by one, it will cause reducers to changestate many times and cause subscribers to be triggered multiple times. Since all these "atom" actionscome from one single user action, it might be more nature if subscriptions can be triggered onlyonce.

There are planty of implementations in the field already. However, after some research, I found noneof them fulfills all my requirements. Thus, instead, this repo is created.

The main difference between this repo and many others are:

1. this one not only combines actions together, but also triggers subscription only once, just asthere is only one action being dispatched.

   This will be very helpful for all subscriptions, especially those who have high computationalcosts.

2. this one offers enhancer instead of reconstructing reducers directly

   A good reason to start with enhancer not reducer is that it will be easier for middlewaresto handle. If batch actions are only handled in reducer, middlewares can only see a bunchof actions all in one. That might add extra works for middleware as it might need to look oneby one inside, to know if any of the actions in it should be dealt with.

3. this one offers optional middleware in case any existing middleware generates batch actionsas well.

   It is very common for middleware such as redux-promise or redux-thunk to generate new actions.If batch actions are generated inside middleware, extra works need to be done to ensure itstill works. Also, this repo makes it opt-in, so that one can choose when to use it.

4. this one only garuantees that batch action will trigger subscriptions one time, nothing morenothing less.

   Some other repo makes options to use different functions to debounce. This might provide morepowerful feature, but also makes it harder to use. Simplicity is prefered here.