Analytics on easy mode with Redux-Saga

July 18, 2017 0 Comments

Analytics on easy mode with Redux-Saga



18 Jul 2017

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 [ registrationAnalytics, todoAnalytics,
// 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


Tag cloud