{"id":7781,"date":"2017-05-04T19:12:26","date_gmt":"2017-05-04T19:12:26","guid":{"rendered":"https:\/\/blog.uruit.com\/?p=7781"},"modified":"2023-05-31T02:38:27","modified_gmt":"2023-05-31T05:38:27","slug":"using-redux-angular","status":"publish","type":"post","link":"https:\/\/uruit.com\/blog\/using-redux-angular\/","title":{"rendered":"Redux with Angular: why should you be using it!"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_17 counter-hierarchy counter-decimal ez-toc-grey\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" style=\"display: none;\"><i class=\"ez-toc-glyphicon ez-toc-icon-toggle\"><\/i><\/a><\/span><\/div>\n<nav><ul class=\"ez-toc-list ez-toc-list-level-1\"><li class=\"ez-toc-page-1 ez-toc-heading-level-1\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#Redux_with_Angular_why_should_you_be_using_it\" title=\"Redux with Angular: why should you be using it!\">Redux with Angular: why should you be using it!<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#Redux_one_of_the_hottest_libraries_for_Front_End\" title=\"Redux: one of the hottest libraries for Front End\">Redux: one of the hottest libraries for Front End<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#What_is_Flux\" title=\"What is Flux?\">What is Flux?<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#Redux_and_Flux\" title=\"Redux and Flux\">Redux and Flux<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#Actions\" title=\"Actions\">Actions<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#Reducers\" title=\"Reducers\">Reducers<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#Store\" title=\"Store\">Store<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#Lets_practice_integrating_Redux_With_Angular\" title=\"Let\u2019s practice: integrating Redux With Angular\">Let\u2019s practice: integrating Redux With Angular<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#Define_the_application_state_models\" title=\"Define the application state models:\">Define the application state models:<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#Then_generate_the_calculators_action_creators\" title=\"Then, generate the calculator\u2019s action creators:\">Then, generate the calculator\u2019s action creators:<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#In_time_add_the_reducer\" title=\"In time add the reducer:\">In time add the reducer:<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#Then_import_the_Store_Module_into_our_apps_main_module\" title=\"Then, import the Store Module into our app\u2019s main module:\">Then, import the Store Module into our app\u2019s main module:<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#Finally_inject_the_Store_service_into_our_components_and_modules_and_request_data_from_the_state_using_the_storeselect\" title=\"Finally inject the \u201cStore\u201d service into our components and modules and request data from the state using the \u201cstore.select.\u201d:\">Finally inject the \u201cStore\u201d service into our components and modules and request data from the state using the \u201cstore.select.\u201d:<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#In_Conclusion\" title=\"In Conclusion\">In Conclusion<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/uruit.com\/blog\/using-redux-angular\/#References\" title=\"References\">References<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"Redux_with_Angular_why_should_you_be_using_it\"><\/span><span data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;Redux with Angular: why should you be using it!&quot;}\" data-sheets-userformat=\"{&quot;2&quot;:15231,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:{&quot;1&quot;:2,&quot;2&quot;:16777215},&quot;5&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;6&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;7&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;8&quot;:{&quot;1&quot;:[{&quot;1&quot;:2,&quot;2&quot;:0,&quot;5&quot;:{&quot;1&quot;:2,&quot;2&quot;:0}},{&quot;1&quot;:0,&quot;2&quot;:0,&quot;3&quot;:3},{&quot;1&quot;:1,&quot;2&quot;:0,&quot;4&quot;:1}]},&quot;9&quot;:0,&quot;11&quot;:3,&quot;12&quot;:0,&quot;14&quot;:{&quot;1&quot;:2,&quot;2&quot;:0},&quot;15&quot;:&quot;Calibri&quot;,&quot;16&quot;:11}\">Redux with Angular: why should you be using it!<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">If you are looking for cool technologies in the Front End development world, <strong>Redux<\/strong> is a great choice. However, many people have no clue how to incorporate it into their applications or even why they should. In the first place this post is a simple introduction to Redux. In the first place, we want to give you tips of how it&#8217;s possible to use Redux with Angular applications. In addition, we will give some real examples of Redux use to help you understand the value of this savvy technology in a simple and practical way!<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Redux_one_of_the_hottest_libraries_for_Front_End\"><\/span>Redux: one of the hottest libraries for Front End<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In the case you\u2019ve never heard of Redux, you may be wondering what exactly it is and why you should use it. Redux is one the hottest libraries for Front End out there. Therefore, it is gaining more and more traction from developers in the industry every day, and transforming the way applications are built. At the same time, it enables a new way to conceive applications by using an unidirectional dataflow. As a result, this gives you better control over your application state and tools to eradicate issues associated to data mutability.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">According to the <\/span><span style=\"font-weight: 400;\">Redux <a href=\"http:\/\/redux.js.org\/\" class=\"external\" rel=\"nofollow\">official documentation<\/a><\/span><span style=\"font-weight: 400;\">, it is <strong>\u201ca predictable state container for javascript apps.\u201d<\/strong> In fact, it is an incredibly lightweight (<\/span><span style=\"font-weight: 400;\">2kB including dependencies<\/span><span style=\"font-weight: 400;\">) implementation of Flux.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"What_is_Flux\"><\/span>What is Flux?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Well, Flux is a data flow architecture created by Facebook back in 2014. Although it was meant to be used by ReactJS applications, it\u2019s actually technology agnostic. Back then, the main purpose was to replace the bidirectional data flow that traditional architectures like MVC encourage for an unidirectional one. If you have ever been in a chaotic apocalyptic program, trying to figure out which view is updating a particular model using getters and setters, then you can probably understand why having an unidirectional dataflow is both convenient and beneficial.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In Flux, a dispatcher sends actions to stores and updates views in an unidirectional data flow. Therefore, it\u00a0<\/span><span style=\"font-weight: 400;\">makes debugging easier and drastically reduces the probability of introducing bugs caused by cascading data changes. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Indeed Redux implements Flux concepts, but also has some differences:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Single source of truth, meaning the entire application state will be held in one and one place only<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The immutability of data<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">There are no dispatcher<\/span><\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"Redux_and_Flux\"><\/span>Redux and Flux<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Moreover, you can think of a Redux\u2019s store as a tree, where you can\u2019t change a node because data is immutable. Keep in mind that Redux doesn&#8217;t provides any mechanisms to ensure the immutability of data itself. But it is very important to keep your store immutable so tools like &#8220;Redux Devtools&#8221; can work properly, for that you will need to use some es6 constructors, or include a library as immutablejs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So you\u2019ll need to create a copy of the last node and perform your changes there. By doing this, you can always know the different states your application has been through and implementing features like time travelling becomes a breeze. This approach also favors debugging and testing, since you can isolate actions and debug\/test them separately. In addition, the immutability of data enables the use of an invaluable tool called <\/span><span style=\"font-weight: 400;\">Redux <a href=\"https:\/\/github.com\/gaearon\/redux-devtools\" class=\"external\" rel=\"nofollow\">Devtools<\/a><\/span><span style=\"font-weight: 400;\">, which provides time travelling, debugging functionality and other great features to accurately observe the state of your applications.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Notably, Redux cycle is really simple, as expressed in the following diagram:<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7790 size-full\" title=\"redux with angular\" src=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/05\/post-danier.png\" alt=\"redux with angular\" width=\"541\" height=\"295\" srcset=\"https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/05\/post-danier.png 541w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/05\/post-danier-300x164.png 300w, https:\/\/uruit.com\/blog\/wp-content\/uploads\/2017\/05\/post-danier-20x11.png 20w\" sizes=\"(max-width: 541px) 100vw, 541px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The state of the application is kept in a data store, which provides information to be rendered by views. So when a view triggers an action, this action is processed by a reducer. As a consequence, this generates a new state that updates the application state. For this reason views observing the store are notified of the change and are updated accordingly. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">So Redux is simply based on: Actions, Reducers and a Store. Let\u2019s go a bit deeper into each.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Actions\"><\/span>Actions<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Actions are payloads of information, that send data to the store. They are the store\u2019s only source of truth. Also, they have a type. Redux only enforces the \u201ctype\u201d property, the structure of the action can be whatever that works for you and your application.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To make the process of dispatching actions easier, some special functions called \u201cAction Creators\u201d are commonly used. Actions creators are exactly as they sound: functions that create actions.<\/span><\/p>\n<pre class=\"lang:default decode:true\">export function addTodo(payload) {\r\n        return { type: ADD_TODO, payload }\r\n}\r\n<\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Reducers\"><\/span>Reducers<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">As actions only describe that \u201csomething\u201d happened, reducers are the ones to specify how the application state changes in response to those actions.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Actually, Reducers are pure functions, meaning they cannot modify input data or be altered by any external state like databases, document object model events, global constants, etc.<\/span><br \/>\n<span style=\"font-weight: 400;\">They have the following signature:<\/span><\/p>\n<pre class=\"lang:default decode:true \">(previousState, action) =&gt; newState<\/pre>\n<p><span style=\"font-weight: 400;\">In effect, the reducer receives the current state and an action to perform, and using the action\u2019s payload it generates a new state, that updates the application\u2019s state.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Also, a reducer is commonly handled with a switch statement, to act according to the received action:<\/span><\/p>\n<pre class=\"lang:default decode:true \">function todoReducer(state = initialState, action) {\r\n  switch (action.type) {\r\n    case DO_SOMETHING:\r\n      return Object.assign({}, state, {\r\n        counter: action.counter + 1\r\n      })\r\n    default:\r\n      return state\r\n  }\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">In short, it is important to provide an implementation for the default scenario, in case an incorrect action is passed. The most important thing to take into account here is that the provided state can not be mutated. In order to ensure that, some people prefer to use some persistent data structures, provided by libraries like ImmutableJs. However, these are often verbose. So it is easier to achieve the goal by using some constructors provided by ecmascript 6 such as Object.assign() and spread operators.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Store\"><\/span>Store<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Last but not least, there\u2019s the store. The store is the one that brings actions and reducers together. That means it:<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\"> holds the application state;<\/span><\/li>\n<li><span style=\"font-weight: 400;\">allows it to access that info through the getState() function;<\/span><\/li>\n<li><span style=\"font-weight: 400;\">allows the state to update with the dispatch() method;<\/span><\/li>\n<li><span style=\"font-weight: 400;\">registers listeners with the subscribe (listener) function<\/span><\/li>\n<li><span style=\"font-weight: 400;\">unregisters them as well, using the object returned by the register function.<\/span><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Lets_practice_integrating_Redux_With_Angular\"><\/span>Let\u2019s practice: integrating Redux With Angular<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As said before, Redux can be used with any javascript technology. So, enough talking! In summary you will see how\u00a0to integrate Redux with Angular projects.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To begin with you can install the Redux library directly into your application. However, it might be useful to install a custom implementation for Angular which will give you access to some angular features like Dependency Injection and Observables. Therefore, there are some good implementations out there such as <\/span><a href=\"https:\/\/github.com\/ngrx\/store\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">@ngrx\/store<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/github.com\/angular-redux\/store\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">@angular-redux\/store<\/span><\/a><span style=\"font-weight: 400;\">. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s choose @ngrx\/store since it seems more active on GitHub.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you set\u00a0a basic angular application, install @ngrx\/store with yarn or npm if you prefer:<\/span><\/p>\n<pre class=\"lang:default decode:true \">yarn add @ngrx\/core @ngrx\/store<\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Define_the_application_state_models\"><\/span><span style=\"font-weight: 400;\">Define the application state models:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<pre class=\"lang:default decode:true \">export interface IAppState {\r\n    calculator: ICalculatorState;\r\n}\r\n\r\nexport interface ICalculatorState {\r\n    result: number;\r\n    resetCounter: number;\r\n}\r\n<\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Then_generate_the_calculators_action_creators\"><\/span><span style=\"font-weight: 400;\">Then, generate the calculator\u2019s action creators:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<pre class=\"lang:default decode:true\">import {Injectable} from '@angular\/core';\r\n\r\n@Injectable()\r\nexport default class CalculatorActions {\r\n     public static readonly ADD = 'ADD';\r\n     public static readonly RESET = 'RESET';\r\n\r\n     public add = (payload: number) =&gt; ({type: CalculatorActions.ADD, payload})\r\n     public reset = () =&gt; ({type: CalculatorActions.RESET})\r\n}\r\n<\/pre>\n<h4><span class=\"ez-toc-section\" id=\"In_time_add_the_reducer\"><\/span><span style=\"font-weight: 400;\">In time add the reducer:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<pre class=\"lang:default decode:true \">import { Action } from '@ngrx\/store';\r\nimport { ICalculatorState } from 'app.models';\r\n\r\nconst defaultState: ICalculatorState = {result: 0, resetCounter: 0};\r\n\r\nexport function calculatorReducer(state: ICalculatorState = defaultState, action: Action): number {\r\n     switch (action.type) {\r\n\tcase CalculatorActions.ADD:\r\nreturn Object.assign({}, state, { result: state.result + action.payload });\r\ncase CalculatorActions.RESET:\r\nreturn Object.assign({}, state, { resetCounter: state.resetCounter + 1 });\r\ndefault:\r\n\treturn state;\r\n}\r\n}<\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Then_import_the_Store_Module_into_our_apps_main_module\"><\/span><span style=\"font-weight: 400;\">Then, import the Store Module into our app\u2019s main module:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<pre class=\"lang:default decode:true\">import { NgModule } from '@angular\/core'\r\nimport { StoreModule } from '@ngrx\/store';\r\nimport { calculatorReducer } from '.\/calculator.reducer';\r\nimport CalculatorComponent from '.\/calculator.component';\r\n\r\n@NgModule({\r\n  imports: [\r\n    BrowserModule,\r\n    StoreModule.forRoot({ calculator: calculatorReducer })\r\n  ],\r\n  declarations: [\r\n\tCalculatorComponent\r\n  ]\r\n})\r\nexport class AppModule {}<\/pre>\n<h4><span class=\"ez-toc-section\" id=\"Finally_inject_the_Store_service_into_our_components_and_modules_and_request_data_from_the_state_using_the_storeselect\"><\/span><span style=\"font-weight: 400;\">Finally inject the \u201cStore\u201d service into our components and modules and request data from the state using the \u201cstore.select.\u201d:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<pre class=\"lang:default decode:true \">import { Store } from '@ngrx\/store';\r\nimport { CalculatorActions } from '.\/calculator.actions';\r\n\r\n@Component({\r\n\tselector: 'calculator',\r\n\ttemplate: `\r\n&lt;input type=\"number\" #number\/&gt;\r\n\t&lt;button (click)=\"add(number.value)\"&gt;Add&lt;\/button&gt;\r\n\t&lt;button (click)=\"reset()\"&gt;Reset&lt;\/button&gt;\r\n&lt;p&gt;{{result|async}}&lt;\/p&gt;\r\n`\r\n})\r\nexport default class CalculatorComponent {\r\n\tpublic result: Observable&lt;number&gt;;\r\n\r\n\tconstructor(private store: Store&lt;AppState&gt;,\r\n\t     private calculatorActions:  CalculatorActions\r\n){\r\n\t\tthis.result = store.select('result');\r\n\t}\r\n\r\n\tpublic add(value: number): void {\r\n\t\tthis.store.dispatch(this.calculatorActions.add(value));\r\n\t}\r\n\r\n\tpublic reset(): void {\r\n\t\tthis.store.dispatch(this.calculatorActions.reset());\r\n\t}\r\n}\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">Definitely,\u00a0that\u2019s all that is needed to set up Redux in a sample Angular application. <\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"In_Conclusion\"><\/span>In Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Hence, this post is a very simple introduction to Redux and how you can use Redux with Angular. There are some important concepts to consider, such as dealing with async behaviours, an area where Redux fails to deliver a solution. But some libraries will need to be installed such as <\/span><a href=\"https:\/\/github.com\/ngrx\/effects\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">@ngrx\/effects<\/span><\/a><span style=\"font-weight: 400;\"> or<\/span><span style=\"font-weight: 400;\"> redux-<a href=\"https:\/\/redux-observable.js.org\/\" class=\"external\" rel=\"nofollow\">observable<\/a><\/span><span style=\"font-weight: 400;\"> to get the job done. Additionally, some libraries to consider are <\/span><span style=\"font-weight: 400;\">redux-<a href=\"https:\/\/github.com\/ngrx\/router-store\" class=\"external\" rel=\"nofollow\">store<\/a><\/span><span style=\"font-weight: 400;\"> and <\/span><span style=\"font-weight: 400;\">redux-<a href=\"https:\/\/github.com\/ngrx\/store-devtools\" class=\"external\" rel=\"nofollow\">devtools<\/a><\/span><span style=\"font-weight: 400;\">. Moreover, for a more extensive list of helpful resources for Redux to deal with forms and many other scenarios, check out the <\/span><span style=\"font-weight: 400;\">awesome-redux<\/span> <span style=\"font-weight: 400;\"><a href=\"https:\/\/github.com\/xgrommx\/awesome-redux\" class=\"external\" rel=\"nofollow\">page<\/a>.<\/span><\/p>\n<p>Besides, if you want to know more about our experience as an app maker, take a look at our <a href=\"https:\/\/uruit.com\/portfolio\">Portfolio<\/a>.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"References\"><\/span>References<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><span style=\"font-weight: 400;\">Redux <a href=\"http:\/\/redux.js.org\/\" class=\"external\" rel=\"nofollow\">Official Page<\/a><\/span><\/li>\n<li><span style=\"font-weight: 400;\">ReactJS <a href=\"https:\/\/github.com\/reactjs\/redux\" class=\"external\" rel=\"nofollow\">GitHub Page<\/a><\/span><\/li>\n<li><a href=\"https:\/\/github.com\/ngrx\/store\" class=\"external\" rel=\"nofollow\"><span style=\"font-weight: 400;\">NGRX Store<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Contents Redux with Angular: why should you be using it!Redux: one of the hottest libraries for Front EndWhat is Flux?Redux and FluxActionsReducersStoreLet\u2019s practice: integrating Redux With AngularDefine the application state&#8230;<\/p>\n","protected":false},"author":18,"featured_media":7806,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[276],"tags":[],"_links":{"self":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts\/7781"}],"collection":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/comments?post=7781"}],"version-history":[{"count":6,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts\/7781\/revisions"}],"predecessor-version":[{"id":11192,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/posts\/7781\/revisions\/11192"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/media\/7806"}],"wp:attachment":[{"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/media?parent=7781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/categories?post=7781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uruit.com\/blog\/wp-json\/wp\/v2\/tags?post=7781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}