redux-batching-middleware
v1.1.0
Published
Redux middleware to automatically batch same actions
Downloads
11
Maintainers
Readme
Description
Redux middleware to batch/throottle action automatically. Uses lodash throttle to combine redux actions and dispatch as one or just to throttle and send only the last one (set option merge: "false", see below). Middleware improves performance for highload applications (e.g. trading/betting/etc with a lot of live data through sockets).
Install
npm i --save redux-batch-middleware
Test Coverage
Config and properties
Config should be an object. Where keys of this object are action types of redux actions. Config values explanations:
{
// Default value of you payload
// (REQUIRED)
defaultValue: string | number | boolean | any[] | BaseObject;
// Time needs to be waited for next dispatch.
// Means: your actions will be dispatched not ofter than this value.
// (REQUIRED)
throttleTime: number;
// Should your values be merged or not.
// Set false if you need your payload to be the last one, not merged.
// Also set false for primitive types
// (REQUIRED). (DEFAULT = true).
shouldMerge: boolean;
// If shouldMerge is true you can specify the key to merge the objects in array.
// Otherwise you will get array of objects. Number of actions equals number of array items.
// Check unionBy https://lodash.com/docs/4.17.15#unionBy
// (OPTIONAL)
mergeByKey?: string;
// Enable logger for batching
// (OPTIONAL). (DEFAULT = false)
logger?: boolean;
// Throttling options
// Check https://lodash.com/docs/4.17.15#throttle
// (OPTIONAL)
throttleOptions?: ThrottleSettings;
};
Usage
import { applyMiddleware, createStore } from 'redux';
import throttleMiddleware from 'redux-batch-middleware';
// create a config
const throttleActionsConfig: ActionConfig = {
CUSTOM_ACTION: {
throttleTime: 5000,
logger: true
}
};
// create store
const store = createStore(
reducer,
applyMiddleware(logger)
)
Live testing example
Lets dispatch many "CUSTOM_ACTION" actions with different data within 5000ms ("throttleTime" we described above in config):
dispatch({
type: "CUSTOM_ACTION",
payload: { a: 1 }
});
dispatch({
type: "CUSTOM_ACTION",
payload: { b: 2 }
});
dispatch({
type: "CUSTOM_ACTION",
payload: { c: 3 }
});
Console output
Result
As the result this combined payload for action "CUSTOM_ACTION" will be dispatched to reducer