Analytics on easy mode with Redux-Saga

18 Jul 2017

Cover image: Analytics on easy mode with Redux-Saga

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

And to do that, you could put the 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(() => {'track', 'CompleteRegistration');

class AddTodoForm extends Component {
  handleSubmit = () => {
    // fire a redux action
    this.props.createTodo(data).then(() => {'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');
    yield call(, 'track', 'CompleteRegistration');

function* todoAnalytics() {
  while (true) {
    yield take('ADD_TODO');
    yield call(, 'track', 'CreateTodo');

export [
// when creating redux store

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

// ...

analyticsSagas.forEach(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.


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


Think your friends would dig this article, too?

If you need a mobile app built for your business or your idea, there's a chance I could help you with that.
Leave your email here and I will get back to you shortly.