redux-batched-actions

redux-batched-actions provides a higher-order reducer and matching action creator that let you dispatch several Redux actions together while notifying store subscribers only once. This avoids the wasted renders and intermediate UI states that come from dispatching a burst of related actions individually, which is especially useful for async flows that update multiple pieces of state in sequence.

The library exposes three small building blocks: batchActions to wrap a list of actions into one batch action, enableBatching to wrap your root reducer so it unpacks and reduces each child action in turn, and batchDispatchMiddleware for cases where other middleware needs to observe each individual child action as it’s dispatched. Because the whole implementation is a few dozen lines, it integrates cleanly with existing Redux stores without requiring changes to reducer logic.

What You Get

• batchActions(actions, type?) action creator that wraps an array of actions into one batch action
• enableBatching(reducer) higher-order reducer that recursively applies each batched child action
• batchDispatchMiddleware for dispatching each child action individually to other middleware while still batching subscriber notifications
• TypeScript type definitions bundled with the package
• Zero runtime dependencies beyond a peer dependency on redux

Common Use Cases

• Dispatching several actions from a single async thunk (e.g. set-loading, set-data, unset-loading) without triggering three separate re-renders
• Reducing render thrash in React-Redux UIs that subscribe to the store and re-render on every dispatch
• Combining actions from multiple reducers that need to update together atomically from the UI’s perspective

Under The Hood

Architecture The library is a single ~35-line module (src/index.js) exporting three functions: batchActions builds a plain action object {type, meta: {batch: true}, payload: actions}; enableBatching wraps a reducer so that when it sees action.meta.batch it recursively reduces each payload action against itself via Array.prototype.reduce, otherwise delegating to the wrapped reducer; batchDispatchMiddleware walks a batched action’s payload recursively (via dispatchChildActions) and calls store.dispatch on each leaf action before calling next(action). There is no internal state, no class hierarchy, and no dependency on Redux internals beyond the standard (state, action) => state and middleware (store) => (next) => (action) => ... shapes. Tech Stack Plain ES2015+ JavaScript compiled with Babel (@babel/cli, @babel/preset-env) into three targets: CommonJS (lib/), ES modules (es/), and a UMD bundle (dist/), with hand-written .d.ts type definitions copied into lib/ at build time. Redux itself is only a peer dependency (>=1.0.0), so the package imposes no version constraints on the app’s own Redux install. Code Quality Tests live under test/ and run via Mocha with Chai/Sinon assertions, invoked through a Babel/CommonJS entry point (export BABEL_ENV=cjs && mocha --require @babel/register). The source itself has no error handling or input validation (e.g. it assumes action.meta is either absent or well-formed), which is reasonable given the tiny, single-purpose scope, but means malformed batch actions fail silently rather than raising a clear error. Naming is consistent and the whole implementation fits on one screen, making it easy to audit by reading. API Design The three exports compose independently — you can use enableBatching alone, add batchDispatchMiddleware alone, or combine both — with no required configuration beyond wrapping your root reducer. The default batch action type (BATCHING_REDUCER.BATCH) is overridable via a second argument to batchActions, and the README documents both the basic usage and an async/thunk recipe. The main ergonomic wrinkle is the documented incompatibility between using enableBatching and batchDispatchMiddleware together, which the README calls out explicitly.