In first part of the NgRx tutorial, we have covered the core concepts and detailed descriptions about what is NgRx; it’s a workflow and its need.
In the second installment, we will learn how to use actions, reducers, selectors, and effects in our application. So you will get an idea of how actually they are interrelated to each other.
So let’s get started.
In the following example, I will display the list(get) of users and add(post) a user using NgRx concepts. Also, I am going to change the state of the loader flag when HTTP request is called.
Before getting into the code, let’s see what we will be making.
Here is the Demo
GitHub Repository
ANGULAR CLI VERSION : “@angular/cli”: “~8.3.20”
Note: Add the Redux dev tools extension in your browser to check the store and state changes.
Install @angular/cli using the following command
npm i -g @angular/cli
Let’s create a new angular application.
ng new Ngrx-demo
After successfully creating the application, we will be adding the dependencies for @ngrx in our app.
npm install @ngrx/{store,effects,store-devtools}
And to make our application look better, we will be using ng-bootstrap and bootstrap package. It is not necessary, as you can add your own CSS framework or custom CSS.
npm install --save @ng-bootstrap/ng-bootstrap
Also, add the bootstrap package.
npm i bootstrap
After successfully adding it, update your angular.json styles array.
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Now, let’s add these modules in our root module. i.e App Module
Are you looking to develop an Angular application using NgRx? Hire Angular Developer from us to build a reliable and robust Angular application with Angular 8 + Redux.
app.module.ts
StoreModule contains the state variable that holds our current state value. Here, users are our state variables. Generally, state variables are defined in selector.ts
EffectsModule loads the effects file when any action is dispatched.
NOTE: Here, I am using the below structure. It may vary according to your project structure.
NOTE: I will be adding code in respective files. Kindly replace it with yours.
Now, let’s create a store folder to manage our NgRx flow in one place.
actions.ts
In an action file, we take the enum type variable and assigns our actions to it. We need to create a class for each action that implements the Action interface.
In GetUserLoad = “[User] Get User,” there is no compulsion to write the string part(i.e. “[User] Get User”) But it is good practice to mention as it will help you to see which action leads to state changes in redux devtool extension.
It is a must to export the actions that I have done in the last line.
reducer.ts
In reducer, a type of action is being checked, and then our state gets updated.
effects.ts
Here, which effect gets called will be decided based on the action that is matched in ofType.
As in getUsers$, GetUserLoad action is dispatched from the get-user component.
We can also dispatch other actions here. Like, after a successful API call, it dispatches GetUserSuccess action and passing ‘user’ payload to it. Likewise, on failure, GetUserFail action gets dispatched with an error.
selector.ts
Selector helps in fetching and manipulating the data present in our current state. So here I am creating two const, first for getting all users and another for getting the first ten users.
index.ts
After completing the store folder, we will now add components, service, and interface. Let’s go!
ng g c get-user
ng g c post-user
After successfully creating components, let’s add some code to it.
get-user.component.html
get.user.component.ts
post-user.component.html
post-user.component.ts
Now I am going to add a service file. Use the following command.
ng g service _services/users
This will create a users.service.ts file in a folder named _services.
Note: I am using fake rest APIs from https://jsonplaceholder.typicode.com/.
You can delete the users.spec.ts file as we are not going to write any test cases here.
users.service.ts
Now let’s add the interface file. Use the command below.
ng g interface _interfaces/users
This will create a users.ts file in a folder named _interfaces.
user.ts
Now finally calling get-user and post-user components in app.component.html using their selector.
app.component.html
In app.component.html, delete all the starter code and add this code.
Finally, our coding part is done. Let’s run the application using the serve command.
ng s --port 4300
After compiling successfully, you will see this.
That’s all!
I hope you enjoyed reading the blog post. Please, let me know your thoughts in the comment section below
Thank you and Happy Coding?
