Analytics on easy mode with Redux-Saga

This post was originally published on goshakkk.name

Tracking how your users actually use your application can be powerful.

And to do that, you could put the window.ga(...) calls all around: inside action creators or your components.

But does that approach strike you as beautiful, in any way?

class SignUpForm extends Component {
  handleSubmit = () => {
    // fire a redux action
    this.props.doSignUp(data).then(() => {
      window.ga('track', 'CompleteRegistration');
    });
  };
}

class AddTodoForm extends Component {
  handleSubmit = () => {
    // fire a redux action
    this.props.createTodo(data).then(() => {
      window.ga('track', 'CreateTodo');
    });
  };
}

You can see where it’s going.

Can you do better?

With Redux-saga, you can. You can place all analytics-related behavior (or most of it, anyway) in a separate file. Which would “listen for certain Redux actions, and automatically track to your analytics service.

But first, what’s Redux-saga about? In its simplest form, a saga, the unif of Redux-saga, is a function like this:

function* aSaga() {
  while (true) {
    const action = yield take('ACTION_NAME');
    // do something
  }
}

It waits for a certain action to happen, then does something — whetever you want. After that, it would wait for another action to occur, and the cycle would repeat.

You could make a lot more complicated sagas, but these are a great start!

(Now, if you are wondering what this function* and yield are — these have to do with ES6 generator functions. I have a blog post explaining them in more detail.)

A more practical example would be:

// analytics-sagas.js

function* registrationAnalytics() {
  while (true) {
    yield take('USER_SIGNED_UP');
    window.ga('track', 'CompleteRegistration');
  }
  }

function* todoAnalytics() {
  while (true) {
    yield take('ADD_TODO');
    window.ga('track', 'CreateTodo');
  }
  }

sagaMiddleware.run(registrationAnalytics);
sagaMiddleware.run(todoAnalytics);

export [
  registrationAnalytics,
  todoAnalytics,
];

// when creating redux store

import analyticsSagas from './analytics-sagas.js';

// ...

analyticsSagas.forEach(saga => sagaMiddleware.run(saga));

Look at this code.

The entire functionality of analytics is now contained in one single file.

And instead of making calls to analytics in our components, we can “feed from Redux actions as they happen.

Considerations

Since sagas can only respond to Redux actions, there still might be places in your app where you would inline analytics calls right inside components. However, even so, you’d be still better off than with inlining everything.

Other uses for sagas

• The Lazy Registration pattern.

References

• Understanding ES6 generators and their use cases

If you like what you see here, subscribe on my blog to make sure you don't miss out on my next posts about React and Redux.