Redux Action Analytics Middleware

2.8.0 verified Sat Apr 25 auth: no javascript

A Redux middleware that triggers analytics callbacks for whitelisted actions. Current stable version is 2.8.0. The project has an active release cadence with periodic dependency updates. Key differentiators: decoupled from any specific analytics tool, consolidates analytics logic in middleware, provides pre- and post-action state to callbacks, and uses Flow types. It strips no data from actions, so callbacks must handle sensitive information.

Common errors

error AnalyticsMiddleware is not a function ↓

cause The import statement used named import instead of default import.

fix

Change to: import AnalyticsMiddleware from 'redux-action-analytics-middleware'

error Cannot read property 'type' of undefined in trackCallback ↓

cause The trackableActions array is empty or the action type does not match any whitelisted type.

fix

Ensure trackableActions contains the exact action type strings and that the dispatched action has a 'type' property.

error TypeError: preActionState is not an object ↓

cause The middleware is applied incorrectly or the reducer returns a non-object state (e.g., null or primitive).

fix

Make sure the reducer returns an object and the middleware is properly passed to applyMiddleware.

Warnings

gotcha The middleware does not strip data from actions. If an action contains sensitive information, the trackCallback must handle sanitization. ↓

fix Add data sanitization logic inside the trackCallback before sending to analytics.

deprecated Flow typing integration is facing challenges: Action, Dispatch, and Store can no longer be imported from Redux in Flow. This may affect TypeScript or Flow users. ↓

fix Use the package's generic parameter for State type, and import types from Redux's flow-typed definitions if needed.

gotcha The trackCallback receives the action object directly. Modifying the action inside the callback may affect the reducer if not careful. ↓

fix Always treat the action as read-only inside the callback, or clone it before modification.

gotcha The trackableActions array is compared by string equality. Make sure action types are exactly matched, including any prefixes or namespaces. ↓

fix Use constants for action types to avoid typos.

Install

npm install redux-action-analytics-middleware

yarn add redux-action-analytics-middleware

pnpm add redux-action-analytics-middleware

Imports

default
wrong
```
const AnalyticsMiddleware = require('redux-action-analytics-middleware')
```
correct
```
import AnalyticsMiddleware from 'redux-action-analytics-middleware'
```
The package exports a single default export, the AnalyticsMiddleware function. CommonJS require works but TypeScript users should use default import.

AnalyticsMiddleware

wrong

import { AnalyticsMiddleware } from 'redux-action-analytics-middleware'

correct

import AnalyticsMiddleware from 'redux-action-analytics-middleware'

This is a default export, not a named export. Using curly braces will result in undefined.

TrackableActionType
```
import AnalyticsMiddleware from 'redux-action-analytics-middleware'
```
TrackableActionType is a type alias (string) used internally; it is not exported. Import only the default export.

Quickstart

Configures the analytics middleware with a simple console.log callback and a whitelist of action types, then creates a Redux store with it.

import AnalyticsMiddleware from 'redux-action-analytics-middleware'
import { createStore, applyMiddleware } from 'redux'

const trackCallback = (action, preState, postState) => {
  console.log('Tracked action:', action)
  console.log('State change:', preState, '->', postState)
}

const trackableActions = ['USER_LOGIN', 'PURCHASE_ITEM']

const middleware = AnalyticsMiddleware({
  trackCallback,
  trackableActions
})

const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 }
    default:
      return state
  }
}

const store = createStore(reducer, applyMiddleware(middleware))

store.dispatch({ type: 'USER_LOGIN' }) // Triggers analytics
store.dispatch({ type: 'INCREMENT' }) // Not tracked