Marques Woodson

Summary

The website content discusses using Redux middleware to streamline event tracking in applications by centralizing tracking logic and reducing the need for manual event tracking calls throughout the codebase.

Abstract

The article addresses the challenge of event tracking in applications using Redux, highlighting the common practice of scattering trackThisEvent calls across the codebase, which can become cumbersome to maintain. It proposes leveraging Redux middleware as a solution, allowing for a single point of tracking logic that intercepts actions before they reach the reducers. This approach ensures that any changes to the tracking requirements or additional data needed for tracking, such as userId, can be managed more efficiently. The article illustrates how to set up a Redux store with middleware and provides examples of middleware functions for tracking page views and other events. By consolidating event definitions and their associated data in a single file, developers can easily update tracking information without modifying reducers or other parts of the application.

Opinions

The author suggests that the traditional method of placing event tracking calls throughout the code is acceptable for smaller projects but becomes problematic as the codebase grows.
Middleware is presented as a powerful feature of Redux, enabling applications to handle complex tasks like logging, crash reporting, and event tracking in a more maintainable way.
The author advocates for storing all trackable events in a centralized location, which simplifies the process of adding or modifying events and reduces the risk of missing updates across multiple files.
The article implies that the proposed method of event tracking with Redux middleware is more efficient and scalable than the conventional approach of manual tracking calls.

Using Redux Middleware for simpler analytics and event tracking

Tracking events across your application can sometimes be a pain. Whether they are Google Analytics, Sentry errors, or BigQuery tracking, the practice I’ve seen many times is to place trackThisEvent(..args) calls all around the code. This isn’t a terrible solution, especially in smaller codebases. But it can have issues when something changes with the trackThisEvent definition, or if you need to pass in more data into each call like userId or some other arbitrary value, you’ll be stuck going through 100’s of files to make updates.

Use Redux Middleware

The great thing about using redux is that all of your actions are defined with your reducers, which are then available to the entire application. Whenever an action is dispatched, your combined store is updated. You probably have a setup similar to this:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import AppContainer from 'components/app-container';
import { createStore, combineReducers } from 'redux';
import * as reducers from 'store/ducks/index';

const rootReducer = {
  ...reducers,
  // probably more reducers, like from the router
};

const store = createStore(combineReducers(rootReducer));

ReactDOM.render(
  <Provider store={store}>
    <AppContainer></AppContainer>
  </Provider>,
  document.getElementById('root')
);

That store object has your entire combined state. Before your changes reach the reducer and become available to the store, they can go through Middleware for any transformations you need.

From Redux (https://redux.js.org/advanced/middleware) —

It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.

Here’s what a simple middleware function looks like for tracking a page view event:

In the above example, whenever the route changes and a @@router/LOCATION_CHANGE event is dispatched, the trackPage method is called with the page we’re navigating to, and the current state store.getState(). For just tracking page views, there’s not too much more you would need to do. What if you want to track more than just page views?

Something we’ve been trying out is storing all events that we’d like to track in a single place. An event-tracking file that exports an object with action types and associated data to go along with the event.

In the example above, the category and the action static strings for these events. The eventDataOne however takes a path that I can use to retrieve data from the state.

Now we can track any event we dispatch in our application without having to place trackEvent calls all over our reducers. For tracking new events you just need to update your event tracking objects.

I hope this helps anyone who needs to setup event tracking in an app that uses Redux. Feel free to post any questions you may have in the comments. Thanks!

React

Redux

Javascript Tips

Analytics

Recommended from ReadMedium