track-action-middleware
A middleware for interfacing actions with some other event tracking or analytics system.
Last updated 2 years ago by bradspaulding .
MIT · Original npm · Tarball · package.json
$ cnpm install track-action-middleware 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.2.0                                ...           latest (2 years ago)

5 Versions

  • 1.2.0                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (0)
None
Dev Dependencies (18)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |