We can test and debug how our application behaves (ie. This plays really well with dispatching actions directly from the extension. The restore functionality is only available in the log monitor and not the inspector. You can perform as many actions as you want from this point on, but you'll always be able to restore the state to a point in time at which you've done a last commit. The commit option allows us to store the state at the specific point in time and treat it as a starting point (it's like saving the game before going on to fight with the boss □). When we select the persist option, the extension makes sure that our state is persisted and restored even after we reload the page. There are a few features that combine well with the aforementioned dispatching technique: We can enter and dispatch the desired sequence of actions and get to the troublesome point in the app state with ease and in a reproducible manner. This is extremely useful if we find the exact course of actions that is leading to an error, but it's hard or long to replicate using the UI. It's available as one of the tabs in the bottom extension's menu:īy using this feature, we can dispatch any action we want. □Replicating the app behaviorĪnother very powerful feature of the Redux DevTools is tha posibility to dispatch the actions without the need of interacting with the UI. Those functionalities alone provide us with handful of possibilities on tracking how the state of our app is changing over time and pinpointing the possible issues. You can either manually select the point in time to jump to or replay the whole sequence of action using timeline at the bottom. Moreover, the extension gives you the possibility to "time travel" your application and skip some of the actions to see how it would affect the end result of the state. The first thing you can do in the Redux DevTools is track all the actions that have been dispatched within the application.įor every selected action, you can see the current state value, what exactly has changed in the state as a result of this action, and the content of action object. You can access the Redux DevTools in the Redux tab on your browser developers tools. With that minimal setup, we can already start using the Redux DevTools to start debugging our application. In order to make our NgRx store visible in the Redux DevTools, we need to pull in a module provided by NgRx platform - For the installation instructions, please visit the official installation guide.Īfter installing the Store Devtools using the AngularCLI schematics, the following code is automatically added to our NgModule ( ) If you haven't worked with NgRx yet, I recommend reading this post first where I introduced the NgRx pattern into a simple app. This tool is essential for me when debugging an NgRx based application. As NgRx adheres to the redux pattern, we can use the same Redux DevTools as we would use for any other Redux base application. Luckily for the devs using NgRx in their project, the application state is kept in a single location and all the actions that can modify it are easily traceable with some great DevTools. It's essential to have proper tools to trace the issues which like to hide in our code execution paths. One of them, of course, is having access to this fantastic DevTool.When working on a complex software solution, we often find ourselves scratching our heads over a bug that was reported to us. Even if you don't normally need to reach into the Redux internals, there's a lot of benefits of RTK Query being built on Redux. You can click into there, see all the different actions that get fired off for particular query, and you can go back to the Inspector window and see really all the different things that happen with Redux. If I go into contact, type and hello world, you can see my contact shows up there at the top. Let's go into My Dogs and click delete dog, you'll see remove dog shows up at the bottom. If you scroll down here, not only will you see the actions that are fired off which you can inspect carefully, you'll also see a special tab for RTK query specifically, so that you can see all the queries that are being fired off. This is because RTK Query uses Redux internally, and so everything it does shows up in the Redux DevTool. As you start to hover over things, you'll notice all sorts of actions being fired off into the Redux store. Refresh the page one time to make sure that it's initialized. Open up our dog's website and down in the Inspector window, you should now see a tab that says Redux. Instructor: Go to the Chrome Web store and install the Redux DevTools extension.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |