9/21/2023 0 Comments Redux toolkit chromeThis configuration means that the Router Store module will save its state inside the store under an application state property named router (configured via the stateKey). In order to enable the Ngrx Store router integration, we need to first declare the following in the root module imports section: The Ngrx Router Store module allows us to do exactly that, so let's go ahead and enable it in our root application module. In order to enable full time-traveling debugging, we need to somehow integrate the DevTools with the Angular Router, so that going back in the Action timeline also means navigating to previous screens. As soon as we start using the DevTools, we will run into scenarios where the time-traveling feature comes in handy.īut the time-traveling debugger by default cannot navigate through multiple application screens, so we can't use it to effectively replay the complete user UI session from the beginning. With the Ngrx DevTools, having the browser extension up and running is only half the story. Setting up the Router integration (ngrx-router) from the beginning In order for this command to work, we will need first to enable Ngrx Schematics, by adding this Angular CLI configuration: ng config cli.defaultCollection running these commands, we will see that the Ngrx DevTools are enabled in the root application module, but only if the Angular CLI is running in development mode:Īnd with this, our application now supports the Ngrx DevTools! Now we just have to install the DevTools extension in our browser, by following these instructions.Īfter installing the extension, you now should have the Ngrx DevTools available under the "Redux" menu option of your browser development tools (open them with Ctrl+Shift+I in Chrome).Īfter opening the Ngrx DevTools, you will have to reload the application in order to start debugging the application. We can setup an Ngrx Store and configure the DevTools all in one go with the following Angular CLI command: ng generate store AppState -root -module It's best to setup the Ngrx DevTools from the very beginning of the project. Installing the Ngrx DevTools with Ngrx Schematics The key benefit of the DevTools is that it gives us some immediate visual feedback about what the application is doing at all times, making it much easier to understand what is going on. If we manage to get the client state of users in production, we can use the DevTools to reproduce bugs locally, just by importing the user production state We can have a new developer on the team inspect the application with the DevTools, and have it get a good initial understanding of how the application works We can visually see the content of the store at any moment, which is essential for debugging Here are some of the benefits of the Ngrx DevTools: What are the benefits of the Ngrx DevTools? The Ngrx DevTools are a Chrome / Firefox browser extension that includes a UI for inspecting and interacting with a Ngrx-based application.Īs an example, here is a screenshot of the Ngrx DevTools in action: The main features of the Ngrx DevToolsĪs we can see, inside the Ngrx DevTools we have:Īn Action Log, that gives us a great understanding of how the application works, and what parts of the application are triggering which ActionsĪ State inspector, that allows us to easily inspect the in-memory store stateĪ Time-travelling debugger (the Play button and timeline at the bottom), that allows us to replay any Action at any given point of the debugging session, and even replay the whole session while navigating through multiple screens So without further ado, let's get started with our Ngrx DevTools deep dive! What are the Ngrx DevTools? Action conventions and best practices, to help to make the most out of the DevTools and of the store architecture in general. ![]() Preventing several types of bugs with Ngrx Store Freeze.Using a custom router serializer in order to avoid freezing the DevTools. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |