NGRX Fundamentals
Build a Shopping Cart
Reserved Area
# Redux Dev Tools
Redux Dev Tools is a browser extension that allow to know everything about what is happening in your application and in my opinion is one of the main reasons to choose Redux (and NGRX) as state manager in complex applications.
It's available for most of the popular browsers:
# Real World Example
Let me describe the Redux Dev Tools with a real example to immediately understand some of the main advantages.
In this site you're reading right now, we often show code snippets with StackBlitz , an online editor very similar to Visual Studio Code to share code using an interactive playgrounds.
StackBlitz uses a Redux pattern behind the scenes so we can see and appreciate how Redux Dev Tools can be useful to track everything, debug and understand what is happening behind the scenes.
Watch the video below to see how StackBlitz is using Redux & its Dev Tools to track all actions and state updates:
The actions history panel, on the bottom left, tell us what actions are done, such as "if editor is loaded", "the panel has been toggled", and so on.
On the right side we can see the global store that contains tons of information about the application state.
By clicking on any actions we can also see how it has impacted the store, or come back to a previous application snapshot and much more.
no audio
As you have seen in the previous video or from the screenshot below, the cool part is that you can read the action history to see what happened (on the left side) and the complete current store on the right side.
It's like reading a novel
Reading the history of actions and how they impacted the state is like reading a novel that describes how the project works.
And imagine how easy it is for a developer who has just joined the team (or also for yourself in 6-12 months) to understand how the project works, its phases and the flow of information as they change throughout its life cycle.
Thanks to Redux DevTools you can track and monitor everything that happens and immediately notice if there is something wrong, without having to open and run complicated debugging sessions or use thousand of console.log.
Furthermore you can:
In this case we see how the TOGGLE_SIDEBAR action (dispatched when we open and close the sidebar) has an object as payload that contains the next sidebar status
{ open: false }
In this case we use the Diff panel to see how the TOGGLE_SIDEBAR action updated the store:
- All actions are tracked and you can know what parameters (payload) are sent with them (Action Tab)
- You can see the global state (State Tab) in each phase of the application life cycle
- It's easy to know how an action affected the state by using the "Diff" Tab
But there is more...
# Time Travel Debugging
Redux DevTools offers an exceptional feature called Time Travel debugging, which utilizes a slider to navigate through the history of dispatched actions and state changes.
The slider provides a visual timeline of all dispatched actions, allowing you to see a sequential list of events that have occurred within your application.
You can also click the PLAY button to reproduce the latest actions just as if it were a video:
You can also jump directly to a specific action or skip an action to see how the application would have behaved without it:
# Import & Export Store: reproduce Bugs
Now imagine we discover a bug while using Stackblitz or any application that uses Redux.
We can export the whole state (in JSON format) from Redux Dev Tools, open an issue on GitHub and share it with the Stackblitz team.
They can get this JSON and import it always using Redux DevTools, recreating exactly the scenario where we get the issue with the history of the actions that generated the bug.
Example of state export:
state.json
# Chart
A useful chart is always available to see the shape of the store and its current values:
Read the documentation on GitHub for more info
