npm i --save redux-actions-bulk-batch
- dispatch a
startBatchMode()
action to halt the state update - dispatch all actions normally that you want batched
- After all actions have been dispatched, dispatch
flushBatchedActions()
action to execute all actions from step 2
- It's very important to have in your reducers the reducer this package uses with the key
batchReduxUpdates
, otherwise this will not work - The root reducer that's returned from combinedReducers should be passed to the reducerBatchUpdatesEnhancer enhancer
- After calling
actions.startBatchMode()
, all state updates gets cached to be executed at one go whenflushBatchedActions()
is called. - Make sure to eventually run
flushBatchedActions()
to give control back to the store
import { createStore, combineReducers } from 'redux'
import { reducer, reducerBatchUpdatesEnhancer, actions } from 'redux-actions-bulk-batch';
import { ADD_TODO } from './types';
import todoReducer from './todoReducer';
function createRootReducer(additionalReducers = {}) {
// It's very important to have in your reducers
// the reducer this package uses with the key
// `batchReduxUpdates`, otherwise this will not work
const reducers = {
batchReduxUpdates: reducer,
todo: todoReducer,
}
return combineReducers(Object.assign({}, additionalReducers, reducers))
}
const rootReducer = createRootReducer();
// Pass the rootReducer to the reducerBatchUpdatesEnhancer from the package
const store = createStore(
reducerBatchUpdatesEnhancer(rootReducer),
)
// Start a transaction by dispatch startBatchMode action
store.dispatch(actions.startBatchMode());
// This should've triggered 5 state updates for ADD_TODO, however using the package it will just trigger one update;
for(let i = 0; i < 5; i++) {
store.dispatch({ type: ADD_TODO, payload: 'DO SOMETHING '});
}
// Apply all updates at one go by dispatching flushBatchedActions
store.dispatch(actions.flushBatchedActions());