Using Redux as an analytics event source

Modern apps rely heavily on analytics, sometimes it's even mandatory. And even after all these years, Redux remains one of the most common state managers around. With those two facts in mind, here's a simple approach to streamline your analytics workflow: instead of manually defining tracking events for every feature, let your Redux actions power your analytics system directly.

I started using this pattern back when I worked on Aeroméxico. Tracking quickly becomes messy: deciding what to log, agreeing on naming conventions, and figuring out which events belong to which funnel… it's a lot of busywork. But Redux actions already describe everything meaningful that happens in your app. So why not use them as your analytics stream?

The main advantage is automation: every new feature you ship automatically produces analytics out of the box, no extra manual event wiring needed. Just make sure to avoid logging sensitive data or huge payloads.

Redux middleware

Implementing this idea is extremely simple. All you need is a small custom middleware. In this example I'm using Sentry to record breadcrumbs, but you can easily plug in any analytics provider.

// Sentry.middleware.ts
import * as Sentry from '@sentry/react-native'

const ACTION_BLACKLIST = ['timer/TICK']

const handleAction = (next: any, action: any) => {
  if (!ACTION_BLACKLIST.includes(action.type)) {
    // Avoid sending full action data across the RN bridge; it can be too heavy.
    Sentry.addBreadcrumb({
      category: 'redux_action',
      message: action.type,
      level: Sentry.Severity.info
    })
  }

  return next(action)
}

export function createSentryMiddleware() {
  return (_store: any) => (next: any) => (action: any) =>
    handleAction(next, action)
}

I only log the action type here because our actions at work are huge and would overload the bridge. You can customize this to send only the fields you truly need.

// During store creation:

const middlewares = []

const sentryMiddleware = createSentryMiddleware()
middlewares.push(sentryMiddleware)

const store: Store = createStore(
  rootReducer,
  compose(applyMiddleware(...middlewares))
)

The code is simple, but the impact is big: you save time, capture more consistent analytics, and automatically track behavior for every new feature you build.

Cheers!