× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

How to create and use Flux logger

Roman Liutikov
Jan 20, 2016
<p>In Flux architecture you have an entity called <em>dispatcher</em>. Every action goes through dispatcher to Flux stores. Turns out it's very useful to be able to see in browser's console how these actions are being sent while you are developing an application. This can help you to figure out how your application behaves and to debug things faster.</p> <p> </p> <p>Logger output could look like this</p> <p><img alt="" src="http://i.imgur.com/PmSAd7F.jpg" style="height:140px; width:389px"></p> <p> </p> <p>In the first position comes name of the action, everything else is data which is dispatched within this action. How it could be implemented? Let's see.</p> <p> </p> <p>In every Flux implementation there's a function named <em>emit</em>, <em>dispatch</em> or <em>send</em> or whatever which is used to dispatch an action. You just need to wrap that function and use a wrapper function when sending an action.</p> <p> </p> <p>This is how you would usually send an action.</p> <pre><code class="language-javascript">import { emit } from 'dispatcher'; import { GET_MESSAGE } from 'actions'; const messageID = 1; emit(GET_MESSAGE, messageID);</code></pre> <p> </p> <p>Now we can wrap emit into a function which will cal emit and log everything into the console.</p> <pre><code class="language-javascript">import { emit } from 'dispatcher'; import { GET_MESSAGE } from 'actions'; function emitLog(action, ...data) { console.log(`%c${action}`, 'background-color:green;color:white;', ...data); emit(action, ...data); } const messageID = 1; emitLog(GET_MESSAGE, messageID);</code></pre> <p> </p> <p>When <em>emitLog</em> is called, you'll see a message in the console. As you can see, it's possible to style the output with a string of CSS. This allows to style differently different types of actions to distinct them better.</p>
comments powered by Disqus