{"id":11362,"date":"2020-01-08T12:39:13","date_gmt":"2020-01-08T12:39:13","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=11362"},"modified":"2025-03-10T11:06:54","modified_gmt":"2025-03-10T11:06:54","slug":"how-to-build-an-angular-application-using-ngrx-angular-8-redux-part-2","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/ngrx-detailed-introduction-of-angular-redux-rxjs-part-2","title":{"rendered":"How to build an Angular application using NgRx (Angular 8 + Redux)- Part 2"},"content":{"rendered":"<style>\np{\n   width:100%;\n}\n<\/style>\n<p>In <a href=\"https:\/\/www.bacancytechnology.com\/blog\/ngrx-detailed-introduction-of-angular-redux-rxjs\" rel=\"noopener\" target=\"_blank\">first part of the NgRx tutorial<\/a>, we have covered the core concepts and detailed descriptions about what is NgRx; it&#8217;s a workflow and its need.<\/p>\n<p>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.  <\/p>\n<p>So let\u2019s get started.<\/p>\n<p>In the following example, I will display the list(get) of users and add(post) a user using <strong>NgRx concepts<\/strong>. Also, I am going to change the state of the loader flag when HTTP request is called. <\/p>\n<p>Before getting into the code, let\u2019s see what we will be making.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/VqjiLWu9tws\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2 style=\"\n    text-align: center;\n\"><a href=\"https:\/\/stackblitz.com\/github\/dollyshah96\/Ngrx\" target=\"_blank\" rel=\"noopener\">Here is the Demo<\/a><\/h2>\n<h2 style=\"\n    text-align: center;\n\"><a href=\"https:\/\/github.com\/dollyshah96\/Ngrx\" target=\"_blank\" rel=\"noopener\">GitHub Repository<\/a><\/h2>\n<p><strong>ANGULAR CLI VERSION :<\/strong> &#8220;@angular\/cli&#8221;: &#8220;~8.3.20&#8221;<\/p>\n<p><strong>Note: Add the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/redux-devtools\/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en\" rel=\"noopener\" target=\"_blank\">Redux dev tools <\/a>extension in your browser to check the store and state changes.<\/strong><\/p>\n<p>Install @angular\/cli using the following command<\/p>\n<pre>npm i -g @angular\/cli<\/pre>\n<p>Let\u2019s create a new angular application.<\/p>\n<pre>\r\nng new Ngrx-demo\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/3-1.png\" alt=\"ngrx\" width=\"500\" height=\"347\" class=\"alignnone size-full wp-image-11369\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/3-1.png 500w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/3-1-300x208.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/3-1-20x14.png 20w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/4-1.png\" alt=\"ngrx\" width=\"501\" height=\"313\" class=\"alignnone size-full wp-image-11368\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/4-1.png 501w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/4-1-300x187.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/4-1-20x12.png 20w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/p>\n<p>After successfully creating the application, we will be adding the dependencies for @ngrx in our app.<\/p>\n<pre>\r\nnpm install @ngrx\/{store,effects,store-devtools}\r\n<\/pre>\n<p>And to make our application look better,  we will be using <em>ng-bootstrap<\/em> and <em>bootstrap<\/em> package. It is not necessary, as you can add your own CSS framework or custom CSS.<\/p>\n<pre>npm install --save @ng-bootstrap\/ng-bootstrap<\/pre>\n<p>Also, add the bootstrap package.<\/p>\n<pre>npm i bootstrap <\/pre>\n<p>After successfully adding it, update your <em>angular.json<\/em> <strong>styles<\/strong> array. <\/p>\n<pre>\r\n \"styles\": [\r\n             \"src\/styles.scss\",\r\n             \"node_modules\/bootstrap\/dist\/css\/bootstrap.min.css\"\r\n           ],\r\n<\/pre>\n<p>Now, let\u2019s add these modules in our root module. i.e App Module<\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\">Are you looking to develop an Angular application using NgRx? <a href=\"https:\/\/www.bacancytechnology.com\/angular-js-development\" target=\"_blank\" rel=\"noopener\">Hire Angular Developer<\/a> from us to build a reliable and robust Angular application with Angular 8 + Redux.<\/p>\n<h2>app.module.ts <\/h2>\n<p><script src=\"https:\/\/embed.cacher.io\/82036dd60436ff47a8ad1cc2022a1df67d58ac48.js?a=e47d1063fe0b41fc7b051015491faf3b&#038;t=atom_one_light\"><\/script><\/p>\n<p>StoreModule contains the state variable that holds our current state value. Here, <strong>users<\/strong> are our state variables. Generally, state variables are defined in selector.ts<\/p>\n<p>EffectsModule loads the effects file when any action is dispatched.<\/p>\n<p><strong>NOTE: Here, I am using the below structure. It may vary according to your project structure.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/5-1.png\" alt=\"EffectsModule\" width=\"234\" height=\"438\" class=\"alignleft size-full wp-image-11373\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/5-1.png 234w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/5-1-160x300.png 160w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/5-1-11x20.png 11w\" sizes=\"auto, (max-width: 234px) 100vw, 234px\" \/><\/p>\n<p><strong>NOTE: I will be adding code in respective files. Kindly replace it with yours.<\/strong><\/p>\n<p>Now, let\u2019s create a <strong>store<\/strong> folder to manage our NgRx flow in one place. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/6-1.png\" alt=\"NgRx flow \" width=\"235\" height=\"135\" class=\"alignleft size-full wp-image-11374\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/6-1.png 235w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/6-1-20x11.png 20w\" sizes=\"auto, (max-width: 235px) 100vw, 235px\" \/><\/p>\n<h2>actions.ts<\/h2>\n<p>In an <strong>action<\/strong> 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. <\/p>\n<p>In <strong>GetUserLoad = \u201c[User] Get User,<\/strong>\u201d there is no compulsion to write the string part(i.e. <em>\u201c[User] Get User\u201d<\/em>) But it is good practice to mention as it will help you to see which action leads to state changes in redux devtool extension.<\/p>\n<p>It is a must to export the actions that I have done in the last line.<\/p>\n<p><script src=\"https:\/\/embed.cacher.io\/81553c880f64a948aaf940920c2f49f22209a015.js?a=4ec907482e32c23d0dd23fef66c9caf7&#038;t=atom_one_light\"><\/script><\/p>\n<h2>reducer.ts <\/h2>\n<p>In reducer, a type of action is being checked, and then our state gets updated.<\/p>\n<p><script src=\"https:\/\/embed.cacher.io\/d95538890a66a948abff11c008251ff62358af12.js?a=9e58072664b792c4eeef9b9e8f6e3e26&#038;t=atom_one_light\"><\/script><\/p>\n<h2>effects.ts<\/h2>\n<p>Here, which effect gets called will be decided based on the action that is matched in <strong>ofType<\/strong>. <\/p>\n<p>As in <strong>getUsers$<\/strong>, GetUserLoad action is dispatched from the get-user component.<\/p>\n<p>We can also dispatch other actions here. Like, after a successful API call, it dispatches <strong>GetUserSuccess<\/strong> action and passing \u2018user\u2019 payload to it. Likewise, on failure, <strong>GetUserFail<\/strong> action gets dispatched with an error. <\/p>\n<p><script src=\"https:\/\/embed.cacher.io\/82033d840d67a814a9a917c05f7e4ba7290ca941.js?a=b1343b95021d567e1f647f6cd8f0849d&#038;t=atom_one_light\"><\/script><\/p>\n<h2>selector.ts<\/h2>\n<p>Selector helps in fetching and manipulating the data present in our current state. So here I am creating two <strong>const<\/strong>, first for getting all users and another for getting the first ten users. <\/p>\n<p><script src=\"https:\/\/embed.cacher.io\/825e69885a32ad41aea842965e244ba72e0ffc13.js?a=eff9090963d89e62c40ea2d79f0b5203&#038;t=atom_one_light\"><\/script><\/p>\n<h2>index.ts <\/h2>\n<p><script src=\"https:\/\/embed.cacher.io\/d85f3bd35e36ad15aef914945f2a1ff47808a046.js?a=999baec2796965dbee79a35af6788b0b&#038;t=atom_one_light\"><\/script><\/p>\n<p>After completing the store folder, we will now add components, service, and interface. Let\u2019s go!<\/p>\n<pre>\r\nng g c get-user\r\n<\/pre>\n<pre>\r\nng g c post-user \r\n<\/pre>\n<p>After successfully creating components, let\u2019s add some code to it.<\/p>\n<h2>get-user.component.html <\/h2>\n<p><script src=\"https:\/\/embed.cacher.io\/835e3fd15a66a245fcad41c20c2d4ca42959fc17.js?a=91fef0516d54b10fc4f8b80a51f0b66d&#038;t=atom_one_light\"><\/script><\/p>\n<h2>get.user.component.ts<\/h2>\n<p><script src=\"https:\/\/embed.cacher.io\/835438820f63ab45aaa21790587812af2e0ffb42.js?a=9f08cb6842b1dbc5019ab8e0e4c11b7e&#038;t=atom_one_light\"><\/script><\/p>\n<h2>post-user.component.html<\/h2>\n<p><script src=\"https:\/\/embed.cacher.io\/d15e6c800567ac40ffab40c20c254bf12803fc46.js?a=1dabb85eb7defcbafcad6dfe3665f22c&#038;t=atom_one_light\"><\/script><\/p>\n<h2>post-user.component.ts<\/h2>\n<p><script src=\"https:\/\/embed.cacher.io\/d70469d45863af12a1f941925e7b1ff5290ea813.js?a=7483141eafbffbb083bd70700708bfed&#038;t=atom_one_light\"><\/script><\/p>\n<p>Now I am going to add a service file. Use the following command. <\/p>\n<pre>ng g service _services\/users<\/pre>\n<p>This will create a users.service.ts  file in a folder named _services.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/7-1.png\" alt=\" users.service.ts\" width=\"234\" height=\"51\" class=\"alignnone size-full wp-image-11379\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/7-1.png 234w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/7-1-20x4.png 20w\" sizes=\"auto, (max-width: 234px) 100vw, 234px\" \/><\/p>\n<p><strong>Note: <strong>I am using fake rest APIs from<\/strong> <a href=\"https:\/\/jsonplaceholder.typicode.com\/\" rel=\"nofollow target= noopener\" target=\"_blank\">https:\/\/jsonplaceholder.typicode.com\/<\/a>.<\/strong><\/p>\n<p>You can delete the users.spec.ts file as we are not going to write any test cases here.<\/p>\n<h2>users.service.ts <\/h2>\n<p><script src=\"https:\/\/embed.cacher.io\/815f3c820c67ac14abf81dc00f7b4ba2285daf45.js?a=73fb3f79eeab0a54b3a1c7087eec8acb&#038;t=atom_one_light\"><\/script><\/p>\n<p>Now let\u2019s add the interface file. Use the command below. <\/p>\n<pre>ng g interface _interfaces\/users<\/pre>\n<p>This will create a <em>users.ts<\/em>  file in a folder named <em>_interfaces<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/8-1.png\" alt=\"interfaces\" width=\"235\" height=\"50\" class=\"alignnone size-full wp-image-11380\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/8-1.png 235w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/8-1-20x4.png 20w\" sizes=\"auto, (max-width: 235px) 100vw, 235px\" \/><\/p>\n<h2>user.ts <\/h2>\n<p><script src=\"https:\/\/embed.cacher.io\/855e6d82093aad41aba846920f2b4ea42a0fa149.js?a=fe3cfae008d7362af990638d879e24cc&#038;t=atom_one_light\"><\/script><\/p>\n<p>Now finally calling get-user and post-user components in app.component.html using their selector. <\/p>\n<h2>app.component.html<\/h2>\n<p>In <em>app.component.html<\/em>, delete all the starter code and add this code. <\/p>\n<p><script src=\"https:\/\/embed.cacher.io\/d85e39d25a33f940a8a241910c7b19a42f0dae17.js?a=5752c6bc690d65a4688f8f6423880013&#038;t=atom_one_light\"><\/script><\/p>\n<p>Finally, our coding part is done. Let\u2019s run the application using the serve command.<\/p>\n<pre>ng s --port 4300<\/pre>\n<p>After compiling successfully, you will see this. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/9-1.png\" alt=\"ngrx demo\" width=\"1366\" height=\"633\" class=\"alignnone size-full wp-image-11381\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/9-1.png 1366w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/9-1-300x139.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/9-1-768x356.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/9-1-1024x475.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2020\/01\/9-1-20x9.png 20w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/><\/p>\n<p>That\u2019s all! <\/p>\n<p>I hope you enjoyed reading the blog post. Please, let me know your thoughts in the comment section below<\/p>\n<p>Thank you and Happy Coding?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In first part of the NgRx tutorial, we have covered the core concepts and detailed descriptions about what is NgRx; it&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":146,"featured_media":11119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[989],"tags":[],"coauthors":[2427],"class_list":["post-11362","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs"],"acf":[],"modified_by":"Binal Prajapati","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/11362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=11362"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/11362\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/11119"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=11362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=11362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=11362"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=11362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}