track-action-middleware

A middleware for interfacing actions with some other event tracking or analytics system.

Usage

import makeTrackActionMiddleware from 'track-action-middleware';
import {
    ACTION_ONE_TYPE,
    ACTION_TWO_TYPE
} from 'actions/MyActions';
 
function trackAction(actionType, { action, ...rest }) {
    // YOUR CODE HERE
    // fire off requests put data somewhere
}
 
const trackActionMiddleware = makeTrackActionMiddleware({
    actionTypes: [
        ACTION_ONE_TYPE,
        ACTION_TWO_TYPE
    ],
    trackAction
});
 
applyMiddleware(
    trackActionMiddleware
)

Using a selector

In many cases, you'll want to grab some extra state to send along in the payload. In a redux app, the abstraction for this is a selector. If you pass makeTrackActionMiddleware a selector function, we'll call it with the store state and splat the result onto the second argument to trackAction.

const trackActionMiddleware = makeTrackActionMiddleware({
    // ...
    selector: (state) => ({
        userId: getUserId(state)
    })
});

The selector will also be passed the action itself, so you can switch on the action to provide different selections.

const trackActionMiddleware = makeTrackActionMiddleware({
    // ...
    selector: (state, action) => {
        switch (action.type) {
        case ACTION_ONE_TYPE:
            return {
                userId: getUserId(state)
            };
        case ACTION_TWO_TYPE:
            return {
                numClicks: getNumClicks(state)
            }
        default:
            return {};
        }
    }
});

Custom event names

By default, the action type will be passed as the event name. If you want to map action types to a different event name, pass getEventName to makeTrackActionMiddleware.

const trackActionMiddleware = makeTrackActionMiddleware({
    actionTypes: [
        ACTION_ONE_TYPE,
        ACTION_TWO_TYPE
    ],
    // the first parameter is the action about to be tracked,
    // so you can use any payload data in the action
    // the second parameter is the result of your selector
    getEventName = (action, selection) => `my-prefix-${action.type}-${selection.companyId}`
    // ...
});