{"id":4151,"date":"2022-02-07T13:23:28","date_gmt":"2022-02-07T07:53:28","guid":{"rendered":"https:\/\/lgconsultancy.wpcomstaging.com\/?p=4151"},"modified":"2022-08-02T09:38:32","modified_gmt":"2022-08-02T09:38:32","slug":"angular-redux","status":"publish","type":"post","link":"https:\/\/lng-consultancy.com\/staging\/5474\/angular-redux\/","title":{"rendered":"Angular Redux"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Redux is a reactive state management library which is developed by Facebook and used in the React library. It is based on the <strong>Flux pattern<\/strong>. The difference between Flux and Redux is how they handle tasks; In the case of Flux, we have multiple stores and one dispatcher, whereas, in Redux, there is only one Store, which means there is no need for a dispatcher. Redux is a person who is incharge of managing data flow in your application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We need to use the NgRx library to use Redux in the Angular framework. NgRx is a powerful library for organizing and managing state and interactions with the state in your Angular applications following the Redux pattern. It is a reactive state management library. With NGRX, we can get all the events (data) from the Angular app and keep them all in one place.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We are going to cover the concepts below in this blog post.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>What is NgRx?<\/li><li>Why use NgRx?<\/li><li>Redux Pattern<\/li><li>Sample application<\/li><\/ol>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>What is NgRx?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">NgRx is a framework for building reactive applications in Angular. NgRx provides libraries for:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Managing global and local state.<\/li><li>Isolation of side effects to promote a cleaner component architecture.<\/li><li>Entity collection management.<\/li><li>Integration with the Angular Router.<\/li><li>Developer tooling that enhances developer experience when building many different types of applications.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Libraries that comprise NgRx are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>@ngrx\/store<\/li><li>@ngrx\/store-devtools<\/li><li>@ngrx\/effects<\/li><li>@ngrx\/route-store<\/li><li>@ngrx\/entity<\/li><li>@ngrx\/schematics<\/li><li>@ngrx\/component-store<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><img fetchpriority=\"high\" decoding=\"async\" width=\"624\" height=\"285\" src=\"https:\/\/lh5.googleusercontent.com\/K4Qpgo7uqdIFGNPTMuHXNh_g9ClHEmf8w6CsOlVwbi6w5KF6ConKaju87URSheLbRmFx30CsBG5i3VVQPS43GA8KCTmFIv8T9Q5ERRzTSzaI73-QpHxOULXp9cNx_77eJk8uQ2vx\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Why use NgRx?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Without NgRx we need a service for each bit of state with complex applications it will become very complex for the developer. With NgRx we doesn\u2019t require a service for each bit of state, rather we have a single store for our application state making it easy to find, track and retrieve state values.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Avoids multiple http calls with state cache<\/li><li>Helps in complex component interactions<\/li><li>NgRx allows us to use tools to view list of actions and our state.<\/li><li>Rollback and time travel debugging.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Without NgRx<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A simple product list example without NgRx.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We may have a data access service that looks like this. We get our product from back end server using Http.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/2D22R_kE0E6qYqzz7r-UWDq3Ehc8n7jAjZmWUEPEEfbbPnWrYi3fIAt9I3LVkA4h5NJfD7rl1UAHRm1HJSYuX6NirocjD3I5GyYQRc_HSCbcQB9I_GUd5iZ8SEPwhuvAkvnt0kQU\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Our component calls that service<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><img decoding=\"async\" width=\"624\" height=\"229\" src=\"https:\/\/lh4.googleusercontent.com\/SixgoY7ysg_J6vsNnbqYR6-P2Fhyd28RoEMxKtydRGWugaLs9jpZtD1kXB3eAlbWq40jNF0aSCPgt7WlqT-I7hj0OpFXk24SUUG7tEnAJmj7DJMa6F-bR8eOVXmApUXE3EYlIXwI\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Notice that this code is on the ngOnInit() method. That means when the user navigates to this page the component calls the service to issue a http get request that retrieves products from the server.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">if the user navigates away even if for a movement and navigates back the component calls the service to get the data again. If the data changes frequently that may be desire but some data just doesn\u2019t change that much so there were no need to get it again.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So here comes the use of NgRx. With NgRx the store provides the client side cache so we don\u2019t need to get data from the server every time the component is initialized.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Redux Pattern<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Redux is a predictable state container for javascript applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><img decoding=\"async\" width=\"624\" height=\"348\" src=\"https:\/\/lh6.googleusercontent.com\/ruoabZ4zYIZah6G9-tpO_jo5j1dGccdyg0jmxRQOIV1NmwIFoG3_c51TpGDfQCpz4fdTuLA9JJ8y-CBGUxu-5iv7YUoiVADzWFQF-Tv7x8F9RwMHJYYDnJM7bwW8CXUX3kdkG9Jr\"><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Redux Principals<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Single source of truth called the Store<\/li><li>State is read only and only changed by dispatching actions<\/li><li>Changes are made using pure functions called reducers<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Store <\/strong>is RxJS powered global state management for Angular applications, inspired by Redux. Store is a controlled state container designed to help write performant, consistent applications on top of Angular.NgRx Store provides state management for creating maintainable, explicit applications through the use of single state and actions in order to express state changes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"369\" src=\"https:\/\/lh3.googleusercontent.com\/7Kpif7FRuXZIIVbg14SRtbi927iWDbhbPdOyTBLk2UtsvtBMG7KqhHjWBPfpUHjf2rBtmh84GuV5QK6EsoPVWMsvYz26HrZyUtWTyN4dPJRQLfK_MdXWLUkPTMUWrTw8CeHUnfnW\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Actions <\/strong>describe unique events that are dispatched from components and services.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/xkhvnPhfx2KFzZe0uj7Ajp_MSBbpXkjst2Exj6AtHoD4qneNLqfv7VljdUnBwJG88cOcyKUFO0FrbzAb6mQbTeY-L9aqMeJ42LYzx7UIvrXqRPCu0pBZIpIITXgb2ilzQkCPF_rx\" alt=\"\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>type<\/strong>: It is a read-only string that describes what the action stands for. For example, <strong>Login<\/strong>.<\/li><li><strong>Payload<\/strong>: This property type depends on what type of data action needs to send to the reducer. In the previous example, the payload will be a user object. Not all actions need to have a payload.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Examples<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Login action after login form submission<\/li><li>Toggle side menu option after a button click<\/li><li>Retrieve data action when initializing a component<\/li><li>Start a global spinner action while saving data<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Reducers <\/strong>are functions that specify how state changes in response to an action.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Reducers are responsible for handling transitions from one state to the next state in your applications.Reducers are functions and handle each state transition synchronously.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/NpHD4Tk_wIRRqQIpUxsaFogGFiRy_WEQoMjZXcv5vgcieOGAO-wLNBQHimqrSA0pGqO2CxiQeTtRjhFoFX5LXSoWhdcTDVk0okGC6O9kyzxW89SbAp4yhmFQz0NkWqmdJG1tf57M\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Examples<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Set a userDetails property on login<\/li><li>Toggle a side menu visible property to true on button click<\/li><li>Set successfully retrieved data on component initialization<\/li><li>Set a global spinner visible property to true while saving data<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Advantages of Redux Pattern<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Centralized immutable state<\/li><li>Better view performance<\/li><li>Testability<\/li><li>Tooling<\/li><li>Component communication<\/li><\/ul>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Sample Application<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This article will show how easy it is to create a simple application using Redux and the NgRx libraries.\u00a0 But before starting the development, we have to make sure that we have installed angular-cli on our computer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. The first step is to generate a new Angular CLI application using the below command in the terminal:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ng new angular-state-management \u2013style=scss \u2013routing=false<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/HgLnlHEgTk7HhjiYfQ1Gou2DvxYQcWxHzefWcKtY4Mwhro4RUv7VPBrUrUjyWiJka72mxNybQRwoe5jKg3Nvya4l2wh6M_MraeJwEZWJAoOIZg1nlBx8jIx1RHtNUfbmsJJ4fFnX\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It will create all the required files and install the dependencies. This will take a few minutes. Open the project in VS code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Let\u2019s run the app created by the CLI, just to make sure everything has been created correctly so far with below command:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>npm start<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Check that the app is running on <a href=\"http:\/\/localhost:4200\/\">http:\/\/localhost:4200\/<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Install NgRx and Tools<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">NgRx Schematics provides scaffolding. NgRx commands get integrated into the Angular CLI, and most of the NgRx elements can be created using angular CLI. So, let\u2019s add NgRx Schematics. (You can use a new terminal window or exit out from the running angular app by pressing the Ctrl+C key )<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ng add @ngrx\/schematics@latest<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Configure the Schematics so that NgRx commands are available in Angular CLI by default.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ng config cli.defaultCollection @ngrx\/schematics<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s install the NgRx,\u00a0 dependencies, and dev-tools now.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>npm install @ngrx\/store \u2013save\u00a0<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>npm install @ngrx\/effects \u2013save\u00a0<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>npm install @ngrx\/entity \u2013save\u00a0<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>npm install @ngrx\/store-devtools \u2013save<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Notice that package.json has been updated.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. Add an NgRx Store to the App<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s generate a NgRx Store in the app.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ng generate @ngrx\/schematics:store State \u2013root \u2013module app.module.ts<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Notice that the following line has been added to the app.module.ts<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">StoreModule.forRoot(reducers, { metaReducers }),<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. Create a sub Module for Customer<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s create a separate module for Customers following the \u2018separation of concerns\u2019 principle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u00a0ng generate module Customer<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6. Create a Customer model<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, we are starting to add some code. First, let\u2019s create a \u2018Customer\u2019 using the CLI.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ng generate class models\/customer<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As another option, you can add it using the editor.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The customer.ts file has been created in the src\\app\\models folder. Add \u2018name\u2019 property to it.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/vaf_29SSgAuUJbhWs51q5ti4hww7WUEGFgagZ4sarxaEMRNJ5qQ21uG-lj6tOiJj0Nq0ayTnUUiW_D6MSrSxmxwsKrp860AH-K5cLfT1jS_wQJxV-EX6-5oHrGEApuavgU38sPwf\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">7. Add Actions<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, we are going to add NgRx-related code. As our diagram above shows, the state that we are going to manage is the collection of customers. We can change the collection of the customer\u2019s state using the actions. For this particular case, we have one action that can change the state:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We are not generating a failure action, So just select \u2018N\u2019.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ng generate action customer\/store\/action\/Customer<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">? Should we generate success and failure actions? No<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">? Do you want to use the create function? Yes<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CREATE src\/app\/ngrx\/customer.actions.spec.ts (218 bytes)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CREATE src\/app\/ngrx\/customer.actions.ts (132 bytes)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create a TypeScript file, customer.actions.ts, in the src\/app folder for customer actions using the editor.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add the following code to the customer.actions.ts file:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/z114HKF9Tf1U8YDiWjIEuB99WbN_NxZMJK7zHi7oUB40_MerKD1GzZPCDgQvylJ-nfZ-Y10NTbMJjXNTDMl566WOZXquW7S_i-NkJADBkneunmYcEsAT75g6gA0aaw-z2AKpXe4x\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">8. Add a Customer Reducer<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s add the reducer; all state changes are happening inside the reducer based on the selected \u2018Action.\u2019 If the state is changing, then the reducer will create a new customer rather than mutating the existing customer list. In the case of the state change, the reducer is always going to return a newly created customer list object.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Generate reducer for Customers. Again, say \u201cNo\u201d to adding failure, success actions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ng generate reducer customer\/store\/reducer\/Customer<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">? Should we add success and failure actions to the reducer? No<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">? Do you want to use the create function? Yes<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CREATE src\/app\/ngrx\/customer.reducer.spec.ts (334 bytes)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CREATE src\/app\/ngrx\/customer.reducer.ts (237 bytes)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add code to the reducer.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/9sWSFirw6TLyDD7p9d1pilfyxS04oBfguJ_EUsJa8hjmRi1AIVWb1t-4uqG3qoFVBm-it5EIIyWbXk9YwEX57DDCy_I1tiogwt9Uq_2nk5zzHGvIZ_HyJ5A53-Tefwl5sZ7RrgVU\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">9.\u00a0 Add Selector<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Generate a selector to get the customers from the Store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ng generate selector customer\/store\/selector\/Customer<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modify the code as below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/6MVBSBdF4NRqWIKjzrYPljxmHffAk6NT23l9EK_xMtdQDnfFGI8aU90DdfBqRQ5dlkn89hKTxPjqU4Vx7uOscUGtOaYh41Zn1rE6lwDZ_zuuUts6FtRE57wPdZ4L46bvtwNUfIF_\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">10. Add a UI Component for View Customers<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Generate CustomerView component<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ng generate component customer\/CustomerView<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add code to the customers-view.compoment.ts file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Declare the customers that are observable at the top of the class and modify the constructor and use the selector to get Observable of Customers<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/hyRn1dcZwyh4tRTuT0znaKRfiYgj16_p3ogh6d9FqDcZpyuiMKtZ-8TDrtRFY_IHbNjfMdfoWEjnXSecXqjPuvVJQOJmxUC2oV-FomeRZdDIWvllAy-URwrUj-zxqnDmOp2_u5AH\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">With required dependencies at the top, the customers-view.compoment.ts file should look like this now:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/xyVk7ZBq-0BLT5jlXOK1fE3Wti_Yjz8ct0JLEej7gR7aT9W9_9SMaM8IKMfSfCddFh60on2A-Ah9BozeDtF6IGIawQjRpmxJ3VWSzotInfbYfxgFONlSRBMuD4OvT3uo1iWSreCo\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Add the following code to the customers-view.compoment.html file.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/_uHDtNLYHhwQXEyclUbzuiTBDKhIiMKPy4b1MayJORYjb3UR_rnZot8ZzKPwryaQbIldvJNX7QymeBxDGdPyu9Tz0DmKif4ZV0NoEikhDyCDjOv083yjeVbEMtXLJlxFwLn7zy3v\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">11. Add UI Controls to Add New Customers<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Generate UI control component to Add Customers<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>ng generate component customer\/CustomerAdd<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add code to\u00a0 dispatch the add customer action\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/_u6enA-AKmlQFlMNxnwCNkVs_lQcv4gnHLWzHYiig__Kij4s4D9xzxuXP6-dGArCDt1G_hvslGWEUyt1xysDA2AV4ZUw6CeMofacUFkPrHfcO21sjp9tJN7dKUtKtxzbxF8ye4SS\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">With all modification the customer-add.component.ts<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/baE2KaKCCtyH1oYdfCEhMJp0hm50zPTIm0hblAk6ZdD62nOqipWIcxRsXesAzy4gL3atoFlhk52X18W9hMgOQIenBzhXj5twSctr6WLg7DvTXhzLPr7ejME0L9HjTGvH56bA-bCE\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">And the customer-add.component.html file.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/1lWlxPSESZERYN6DXBSjC0VeYslZrVhkq6EtQnQ4yIV_kCE8xhh7PU7E2Am6Z-41xV4IfCnCWp-4DipWdKzIYDv3pFGbDWIf3oNbL52f3wx4B8DpmjYcVTGlcm5V04DimTA10ll6\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">12. Add StoreModule for Feature in Customer Module<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add Store module in the CustomerModule<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/V-VoA8NRO594ORCDE_UnrHk4LYFw5u8Gzpg7TAQFQexxeMNV-JJjgKpeVQNHU7EhyawuQQ1X_-2WjM4P_LEydNPXZMT6j99qLFIfyED0zdgzYBgjuPByP0Zy32Rq21ROx0gfWddx\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Also, add the exports\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/bMQOfefbQ6SY_9O3xLHqKPAzqbczNgtNlwRALWefhHAB09vyQLoZl1_UtSC7A9psYJHB98bOvn6IpERlrAWUjr8EB-ZN3Q_WC1H08j2aWHGDJtp1puSETB_lUsUBNP6xKl3wBXw4\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The customer.module.ts will look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/oyuDcoVMWVjQAP3rdC2h-bKb20tQLbsCBsHAb9YCT9XDciPacxKPgvSev4kgTRCVPgsv70zqt5jU2y6fN7M2ippc0iLeiMYTbF_DT3ZJLmu2idL1kfGoKyedF-tcnBbkITi0fKRq\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">13.\u00a0 Import the CustomerModule in the AppModule<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a0Import the CustomerModule into the AppModule<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/t2qDYKxKGtkwcqWREUfKrWVAdN_0ak8xWOsSfZBJYo3ve57dyfHLiL_cXDMFohbWs-UtlxqMsT1h1MCq81kUW2HAXsiNj34maQEB9EFlXD-MdTwctgg-WXgEUTS221jTEZFqaXOE\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">14. Update the App Component With CustomerView and CustomerAdd Component<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now update the app.component.html file by removing the default content and embedding both the \u2018app-customers-view\u2019 and \u2018app-customer-add\u2019 components.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The app.component.html file should look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/o06jR9p3zb8GKjKa2Hv9NnLvJsbAALLVLep3AvRleb0efUM7sDealzBA5wsAL3NwCf88QoWp95Lxkz3Ypp2dEWapKxRI7pcZlpuFmO8bPNImu5bcDvgH31dxayHMgG4s9hYYAR_o\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">15. Run the App<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Redux is a reactive state management library which is developed by Facebook and used in the React library. It is based on the Flux pattern. The difference between Flux and Redux is how they handle tasks; In the case of Flux, we have multiple stores and one dispatcher, whereas, in Redux, there is only one [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":7261,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"nf_dc_page":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[32],"tags":[],"class_list":["post-4151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular Redux - L&amp;G Consultancy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/landg-consultancy.com\/angular-redux\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Redux - L&amp;G Consultancy\" \/>\n<meta property=\"og:description\" content=\"Redux is a reactive state management library which is developed by Facebook and used in the React library. It is based on the Flux pattern. The difference between Flux and Redux is how they handle tasks; In the case of Flux, we have multiple stores and one dispatcher, whereas, in Redux, there is only one [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/landg-consultancy.com\/angular-redux\/\" \/>\n<meta property=\"og:site_name\" content=\"L&amp;G Consultancy\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-07T07:53:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-02T09:38:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/landg-consultancy.com\/wp-content\/uploads\/2022\/02\/Untitled-design-5.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"nagalakhsmi M R\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"nagalakhsmi M R\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/\"},\"author\":{\"name\":\"nagalakhsmi M R\",\"@id\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/#\\\/schema\\\/person\\\/5bd666a89e05ca2aa6b0595a91ec5e91\"},\"headline\":\"Angular Redux\",\"datePublished\":\"2022-02-07T07:53:28+00:00\",\"dateModified\":\"2022-08-02T09:38:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/\"},\"wordCount\":1603,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/lng-consultancy.com\\\/staging\\\/5474\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Untitled-design-5.jpg?fit=1200%2C628&ssl=1\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/\",\"url\":\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/\",\"name\":\"Angular Redux - L&amp;G Consultancy\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/lng-consultancy.com\\\/staging\\\/5474\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Untitled-design-5.jpg?fit=1200%2C628&ssl=1\",\"datePublished\":\"2022-02-07T07:53:28+00:00\",\"dateModified\":\"2022-08-02T09:38:32+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/#\\\/schema\\\/person\\\/5bd666a89e05ca2aa6b0595a91ec5e91\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/lng-consultancy.com\\\/staging\\\/5474\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Untitled-design-5.jpg?fit=1200%2C628&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/lng-consultancy.com\\\/staging\\\/5474\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/Untitled-design-5.jpg?fit=1200%2C628&ssl=1\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/landg-consultancy.com\\\/angular-redux\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/lng-consultancy.com\\\/staging\\\/5474\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Redux\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/#website\",\"url\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/\",\"name\":\"L&amp;G Consultancy\",\"description\":\"Your Technology Partner\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/sh024.global.temp.domains\\\/~landgcon\\\/#\\\/schema\\\/person\\\/5bd666a89e05ca2aa6b0595a91ec5e91\",\"name\":\"nagalakhsmi M R\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ead1027c054f4ea50df5edf96b259fbc9d07db72369a7ac9375d8510b4771d3f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ead1027c054f4ea50df5edf96b259fbc9d07db72369a7ac9375d8510b4771d3f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ead1027c054f4ea50df5edf96b259fbc9d07db72369a7ac9375d8510b4771d3f?s=96&d=mm&r=g\",\"caption\":\"nagalakhsmi M R\"},\"url\":\"https:\\\/\\\/lng-consultancy.com\\\/staging\\\/5474\\\/author\\\/nagalakshmim\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Redux - L&amp;G Consultancy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/landg-consultancy.com\/angular-redux\/","og_locale":"en_US","og_type":"article","og_title":"Angular Redux - L&amp;G Consultancy","og_description":"Redux is a reactive state management library which is developed by Facebook and used in the React library. It is based on the Flux pattern. The difference between Flux and Redux is how they handle tasks; In the case of Flux, we have multiple stores and one dispatcher, whereas, in Redux, there is only one [&hellip;]","og_url":"https:\/\/landg-consultancy.com\/angular-redux\/","og_site_name":"L&amp;G Consultancy","article_published_time":"2022-02-07T07:53:28+00:00","article_modified_time":"2022-08-02T09:38:32+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/landg-consultancy.com\/wp-content\/uploads\/2022\/02\/Untitled-design-5.jpg","type":"image\/jpeg"}],"author":"nagalakhsmi M R","twitter_card":"summary_large_image","twitter_misc":{"Written by":"nagalakhsmi M R","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/landg-consultancy.com\/angular-redux\/#article","isPartOf":{"@id":"https:\/\/landg-consultancy.com\/angular-redux\/"},"author":{"name":"nagalakhsmi M R","@id":"http:\/\/sh024.global.temp.domains\/~landgcon\/#\/schema\/person\/5bd666a89e05ca2aa6b0595a91ec5e91"},"headline":"Angular Redux","datePublished":"2022-02-07T07:53:28+00:00","dateModified":"2022-08-02T09:38:32+00:00","mainEntityOfPage":{"@id":"https:\/\/landg-consultancy.com\/angular-redux\/"},"wordCount":1603,"commentCount":1,"image":{"@id":"https:\/\/landg-consultancy.com\/angular-redux\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/lng-consultancy.com\/staging\/5474\/wp-content\/uploads\/2022\/02\/Untitled-design-5.jpg?fit=1200%2C628&ssl=1","articleSection":["Software Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/landg-consultancy.com\/angular-redux\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/landg-consultancy.com\/angular-redux\/","url":"https:\/\/landg-consultancy.com\/angular-redux\/","name":"Angular Redux - L&amp;G Consultancy","isPartOf":{"@id":"http:\/\/sh024.global.temp.domains\/~landgcon\/#website"},"primaryImageOfPage":{"@id":"https:\/\/landg-consultancy.com\/angular-redux\/#primaryimage"},"image":{"@id":"https:\/\/landg-consultancy.com\/angular-redux\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/lng-consultancy.com\/staging\/5474\/wp-content\/uploads\/2022\/02\/Untitled-design-5.jpg?fit=1200%2C628&ssl=1","datePublished":"2022-02-07T07:53:28+00:00","dateModified":"2022-08-02T09:38:32+00:00","author":{"@id":"http:\/\/sh024.global.temp.domains\/~landgcon\/#\/schema\/person\/5bd666a89e05ca2aa6b0595a91ec5e91"},"breadcrumb":{"@id":"https:\/\/landg-consultancy.com\/angular-redux\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/landg-consultancy.com\/angular-redux\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/landg-consultancy.com\/angular-redux\/#primaryimage","url":"https:\/\/i0.wp.com\/lng-consultancy.com\/staging\/5474\/wp-content\/uploads\/2022\/02\/Untitled-design-5.jpg?fit=1200%2C628&ssl=1","contentUrl":"https:\/\/i0.wp.com\/lng-consultancy.com\/staging\/5474\/wp-content\/uploads\/2022\/02\/Untitled-design-5.jpg?fit=1200%2C628&ssl=1","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/landg-consultancy.com\/angular-redux\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lng-consultancy.com\/staging\/5474\/"},{"@type":"ListItem","position":2,"name":"Angular Redux"}]},{"@type":"WebSite","@id":"http:\/\/sh024.global.temp.domains\/~landgcon\/#website","url":"http:\/\/sh024.global.temp.domains\/~landgcon\/","name":"L&amp;G Consultancy","description":"Your Technology Partner","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/sh024.global.temp.domains\/~landgcon\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/sh024.global.temp.domains\/~landgcon\/#\/schema\/person\/5bd666a89e05ca2aa6b0595a91ec5e91","name":"nagalakhsmi M R","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ead1027c054f4ea50df5edf96b259fbc9d07db72369a7ac9375d8510b4771d3f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ead1027c054f4ea50df5edf96b259fbc9d07db72369a7ac9375d8510b4771d3f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ead1027c054f4ea50df5edf96b259fbc9d07db72369a7ac9375d8510b4771d3f?s=96&d=mm&r=g","caption":"nagalakhsmi M R"},"url":"https:\/\/lng-consultancy.com\/staging\/5474\/author\/nagalakshmim\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/lng-consultancy.com\/staging\/5474\/wp-content\/uploads\/2022\/02\/Untitled-design-5.jpg?fit=1200%2C628&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/posts\/4151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/comments?post=4151"}],"version-history":[{"count":1,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/posts\/4151\/revisions"}],"predecessor-version":[{"id":7262,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/posts\/4151\/revisions\/7262"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/media\/7261"}],"wp:attachment":[{"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/media?parent=4151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/categories?post=4151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lng-consultancy.com\/staging\/5474\/wp-json\/wp\/v2\/tags?post=4151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}