‚̧Non-Production Machines
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    redux-batching-middleware
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    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

    alt text

    Result

    As the result this combined payload for action "CUSTOM_ACTION" will be dispatched to reducer

    Install

    npm i redux-batching-middleware

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    ISC

    Unpacked Size

    108 kB

    Total Files

    25

    Last publish

    Collaborators

    • avatar