Setting up NgRx in our application using Nx

Nx provides schematics that we can use to generate the NgRx setup and state of the application using simple commands. Let's generate a new ngrx state as the root state of the application:

> ng g ngrx --module apps/es-admin/src/app/app.module.ts
? What name would you like to use for the ngrx state? app
? What is the path to the module where this ngrx state should be added to?
apps/es-admin/src/app/app.module.ts
? Is this the root state of the application? Yes
? Would you like to add a Facade to your ngrx state No

You should see that a new folder called +state has been generated in the es-admin project, as well as some updates to AppModule so that we can include the necessary modules. This folder also includes a module that we can use to set up the Redux store for DevTools. First, let's install the browser extension, Redux DevTools. Once installed, we need to open up our browser's developer tools, navigate to the Redux tab, and refresh our es-admin application. You should see that it shows the actions on the left-hand side and some more details on the right-hand side. This will be helpful when we wish to perform debugging and use the time-traveling feature of Redux to replay certain actions:

Now, we have a setup for NgRx up and running in our application. Next, using NgRx, we will create an authentication library that can be reused by applications in our Nx monorepo.

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

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