How it works…

Let's fire up our region application, and then open the web developer tools and pick the Redux tab. You'll get something like in the following screenshot:

 Loading the application shows the initial state plus a couple of actions: the request for countries and the success of that request

There are many features here. The following slider (you will have to click the clock icon on the bottom bar to see it) is probably the most interesting one, because it lets you go back and forth; try sliding it, and you'll see how the application changes.

For example, you could easily see how the screen looked when the country request action had been dispatched, but before the data came back; see the next screenshot. You'll remember that in order to check this out, we had to add an artificial time delay before; now, you can examine the situation at will, with no need to add any special code:

By using the slider, you can see how the application looked at any previous moment

If you select the Inspector option in the drop-down list at the top, you can examine actions and states. For example in the next screenshot, you can examine the action that was dispatched when the list of countries was retrieved from the server with all its data. You'll notice that this kind of information is very similar to what the Redux logger package produced, but you can work with it in a more dynamic way:

The Inspector feature lets you view actions (as here) and states, so you can inspect everything that happened

Let's advance a bit; select France again, and we'll see how the state changed after those regions came in. The Diff tab shows you only the differences in the state: in our case, the loadingRegions value was reset to false (it had been set to true when the request for region action was dispatched), and the list of regions got its values (all the regions of France). See the following screenshot:

 The Diff tab lets you quickly see just the state changed attributes for a faster, simpler analysis
We haven't gone through all functions, so go ahead and click everywhere to find what else is available. For example, the buttons on the left in the bottom bar let you open a separate window for debugging, so your screen won't get so cramped; another button lets you create and dispatch any action, so go ahead, try everything out!

You really should experiment with the tool to get a clear perspective on what you can achieve with it—and, in particular, try out the time machine function. You'll appreciate the fact that this kind of result is possible only because of the way in which React creates the view as a function of the state, but then you will eventually come to notice that something is missing; let's find out what is it, and how to fix it?

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.226.82.253