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:
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:
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:
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:
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?