A Redux middleware for interfacing actions with some other event tracking or analytics system.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
flow-typed/npm
src
.babelrc
.editorconfig
.eslintrc
.flowconfig
.gitignore
.npmignore
LICENSE
README.md
circle.yml
package.json
rollup.config.js
yarn.lock

README.md

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}`
	// ...
});