Logger for Redux-saga middleware

If you are working on Redux-saga, It is always better to know what action is dispatched when your app is running.

I found this helpful while building a Tax research tool at Riverus

There are 2 ways to achieve this. One is using, Saga Watcher and another is writing a custom logger via applyMiddleware.

Let us go with Saga Watcher,

You might have noticed that, whenever you include a saga in the file, There is a root saga / saga watcher which accepts a Constant and based on the same constant it calls a generator function.

Photo by Jordan Spalding on Unsplash

We will modify this watcher and replace the constant with a “*”.

The comparison of constants happens on Regex comparison. So, the “*” stands for any match in regex. Basically we are instructing the watcher to accept all the dispatched actions from the app and call a function based on that.

Now, every action that is dispatched through the app is printed in your console for development reference.

The second method is using applyMiddleWare of redux

While creating a React-Redux app, you might have noticed that you need to create a store using a middleware

Standard template to create a store using redux

Here we are creating a store to be infused to the app using a <Provider />.

So, we will write a custom logger and use it in the applyMiddleware.

Custom logger to be used

Now, use the exported “logger” in the applyMiddleWare.

applyMiddleWare with custom logger.

Now, if you see your console in chrome, every action will be recorded for development reference.

Thanks and bye!!