State Management in Angular - Do I need Redux & NgRx? (2021, Advanced)

hi there my name is metro merzanski and in this video we're gonna talk about ngrx and redux so you asked me quite a lot to make such a videos about this library and in with this video i would like to start the video series about this uh redux architecture and in the end we're going to build the application some simple kanban board where we're going to use ngrx library and angular cdk model for drag and drop functionality so we gonna kill kind of two birds with one stone so subscribe to my channel we are getting started in this particular video we are not going to code things but rather we're going to figure out if the redux and ngrx in particular is a good fit to your project if it's right solution and do we really need it for our applications because ngrx is not silver bullet uh it is uh it has its own benefits as well as uh drawbacks so before we start to uh use this library this architecture in our application we have to um uh figure out about uh pros and cons in order to not uh turn our project into a mess so watch this video until the end and i will give you some um checklist where to go with redux or when you should choose some another intellectual decision okay so i'm pretty sure you're already aware of redux what is this but for those who who is no to the topic i would like to give some on boarding but if you already know it you can use the time codes in the video description and safely jump over to over this section and if you are still here so let's get started and we're going to start with such a thing called state so state could be really that there are a lot of states yeah it could be the state of router right we have different urls which represent different role state or we could have two component with some property and this is the one state and then we change the property value because of clique or whatever it changes its state so we have another state yeah so this also called the local state or component state right but the thing is that in real life applications we have a bit more complex states more complex components more complex relations between these components and very often our components they relate on on the same slice of data right and this is okay if they have parent-child relationships so we can use inputs and outputs in order to synchronize states but uh it can be a little bit tricky when our components do not have such relationships as example we have some user list and in the component we want to render them as a just a list right but in another component we just want to show the count of users and they are located in completely different places within our application familiar use case right so um and it turns into a problem when we try to actually synchronize these two states as example if i remove the user here i have to somehow update the counter in my another component so how usually we share the state between such components right we create just a service and services in angular they're single tones in scope of injector so once we modify data in within our service the all components which relate to the data from this component they will get the same data and there is actually nothing and i would like to highlight nothing bad with this solution your application can live with it quite a long time because actually it's also a problem without any issues and which is even more important this is very straightforward solution but the problem with this approach you can encounter later on when your application is growing and growing there are more and more components these relations between components become more sophisticated uh state management become becomes really um hard and then the sharing state with the services uh can turn into unmaintainable thing yeah and um this is where redux can shine and it tries to give you some order in these chaos right so how redux can make our life easier well originally redux comes with such a thing like global store where we store our uh all possible states in our application you can imagine this like just the object the huge object in the memory and it has different different data different object keys which store some data and uh every component can subscribe to this particular slice of data and read this values from it right it gives us kind of one source of truth where our components can read the data but what about updating the data so in redux you you are not allowed to update your store from any component or whatever you can do it only from one centralized place because uh yeah it would turn into the mess when every component can change the state and that's i i cannot imagine how to debug such a thing when uh literally any component can put the wrong data into the state and then how to figure out which exactly component did it the one thing which component can do in this case it can dispatch some action which happens um and action this is just an object which has the type property which describes what the this is unique uh kind of action identifier action id which says what exactly happened or should happen and it can also pass some data uh which should be somehow put to the store or whatever as example if we want to remove uh the user or add the user to our store we dispatch the action which says that please add to the store and we give the data the user data which should be added to the to the store right okay so now we know that components dispatch action and we have the store and there is should be something in between right some clue between um store and the action so it should be some kind of handler and uh such a thing called in redux reducer so reducer it's a just a function which takes two arguments it takes the current state of the store and it takes action and based on this action a reducer can modify the store and return the new state which will be uh put to the store right as simple as that and here it's important to mention that reducer should be a pure function and pure function this is the function which don't have side effects and oh i think it will be a topic for another video what is pure function and why redux uh enforce you to use this pure function so um i think it would be better to put it to a separate video but just keep in mind that uh the reducer function should be pure and you can for now just go to the internet and read what means the pure functions but let's uh keep it simple for this video and uh move forward and cover this later in another video so um so yeah now our reducer gets the this data modifies update the store and once our store has been modified it our components which subscribe to some certain slice of data will get the new state and they will render its view if it's necessary right so and what is ngrx how grx related to this everything and jrx it's a library which implements this pattern and its own reactive way they heavily using observables which is a great fit in my opinion with angular because angular built on top of observables and it works perfectly together um yeah and also in jrx provides some um extra things i would say uh it's called selectors and uh such a thing like effect and uh in effects you can handle your uh side effects if you have some uh as you uh remember i mentioned that reducers are pure function so uh they don't have side effects like i know http calls whatever if you want to save data into the local store this is all all these side effects and if you need to handle this you should use um ngrx effects for this kind of operations and of course we will cover it in next videos as well so this is what ngrx is and here we are coming closer to the question do we need redux at all in our application and this is absolutely necessary to give yourself the honest answer on this question and yeah i i can understand that you can feel some itching like yeah let's try it out everybody talks about redux redux is very uh popular library everybody uses redux let's try let's try but no that's it doesn't work like this uh you um can really uh make your life harder with this decision if if you if you make wrong decision yeah it will be hard because in fact um development with redux is slow it's it's two times slower than than without reduxia and you can imagine also like even some small feature uh enforces you to create slice in the global store then you have to create reducer for this then you have to create actions then if you have some async operations or side effects you have to create uh effects and so on so on even for some small feature you have to do it and it for small projects it's kind of overkill with redux you have predictable data flow which makes sense on a huge project but the price of it is over engineering on the small ones so this is the thing you have to think about and now let's go to my personal uh no goal list for their redux and let's get started for from the first item and the first one is you have a small project or you just starting the project or you do some kind of prototyping you definitely don't need redux there it just takes a lot of your time and it gives you i would say no benefits at all yeah if you do something small it makes just no sense you just bring over engineering and increase the complexity of your project and the second thing is when you build your library or you know a shared component library this is could be a really terrible architectural solution i saw such a thing and i can tell you that it makes absolutely no sense to bring state management into your shared component library because doing this you enforce all other projects which are using this uh shared component library to implement also redux despite they need it or not because in your company you can have different projects with a different scale you can have the small microservices you can have the huge applications and for some of them redux overkill then try to avoid redux if you going to build the application which is very very important for your company but nobody from your team has never worked with redux uh really think twice because in redux you have to really understand what you are doing if you don't understand it in 99 of cases you will end up with a really buggy application and maintainable application and you will have really hard time with it and the last thing in this list i would say uh if you have graphql backend most probably redux will not be the best choice for it most probably you would rather go with apollo client which which is designed for to work with graphql so or if you're already using this um apollo client then you definitely don't need the redux because apollo client already uh handles these state management things its own way but it does it and if you introduce also redux next to apollo client you will have most probably two source sources of truth and then you will have hard times trying to synchronize this uh two states together and i would recommend you to go with something one and it would be probably apollo client and now let's talk about the cases when the redux architecture might be the good choice for your application and the first case would be if you have really huge application i don't know 500 uh components and more and you have and in such big applications you definitely have the situations when you need to share some data across a lot of different components on the different levels and this is perfect scenario for redux architecture the second case it's if your application has a lot of uh undo features or reverting or optimistic updates those all are good scenarios in order to bring the redux architecture into your application then let's move forward and another scenario where redux might be useful is when your application needs to have to be restorable uh what i mean by that as example you have some certain application state yeah and you want to save this state as a i know object or save it somewhere in the browser local local storage or you just want to serialize this and transfer to another client and another client should take this state and restore it on its own side this is the good scenario because redux restoring of the state with the redux is really really trivial task another case when i would go immediately with redux this is if i if i am sure that this project is going to be huge because sometimes even not sometimes it's quite usual case in many companies that you have some really huge legacy project and you have to migrate to some modern tech stack and you already like know that this this project is big so it makes sense uh most probably to go immediately with redux because if it's a big project it has a lot of uh scenarios i mentioned before why not to start with redux immediately and the last thing i would like to mention is that um how to understand that this is only the time to migrate to redux and that's not easy to answer but uh from my personal observation i would recommend uh to go to redux when you see that you starting to come up with your own pattern as soon as you see that you trying to somehow orchestrate your services some certain way or you trying to come up with some i don't know conventions something like this once you uh have a feeling that you're starting to reinvent the wheel i would say this is a good um like good moment to stop and think about uh migraine migrating to redux architecture and why i would recommend you to go with the redux redux architecture in this case because um uh okay uh i don't want to say such a radical statements so but anyway in 99 of cases you'll not build something better than open source solutions um especially very popular uh open source solution like redux or ngrx and gxs whatever you cannot compete against the whole world and you cannot document things better than open source um frameworks libraries and so on your documentation will be always out to dated this is i see this everywhere in every company all this is very rare cases when you have up-to-date documentation about some in-house tools libraries whatever and what is even more important in my personal opinion you don't need to spend time teaching your new team members about your unique framework unique redux implementation and things like that you just can say that okay we're using ngrx the new developer most probably know already at least basics of it it can ask um community on the stack overflow uh he can or she can go to the official ngrx website and learn documentation and it will be always up to dated yeah and yeah that's just save a lot of time and this tool will be always improved by community and this is uh absolutely win-win situation so i would recommend you in these cases to take some open source library and go with this if you have some super unique application whatever you can fork some library some open source library and adjust it to your needs but in ninety percent cases you just don't need it that's that's like this okay guys i think this is pretty much everything i would like to share with you regarding redux and grx and yeah this is everything i mentioned in this video it's just my personal thoughts my personal observations it is not something set in the stone to go or not to go with redux this is team decision every application is unique and this is not possible to give you correct answer right and some unique answer which fits to every use cases but you have my checklist how i personally take decision regarding this and i hope it will help you in uh your decisions for your application and yeah don't forget to subscribe to my channel don't forget to share this videos with your colleagues if you find this useful of course don't forget to leave comments because maybe you disagree with some of my statements maybe i forgot to mention something yeah let's discuss it and of course i wish you productive week take care and see you in the future

Channel: Decoded Frontend

Views: 12,337

Keywords: angular redux, ngrx angular, angular ngrx, states angular, redux in angular, angular with redux, ngrx store, ngrx tutorial, angular state management, ngrx store tutorial, state management, angular state management ngrx, ngrx store angular 10

Id: 2LwuV6s-Cy4

Length: 24min 41sec (1481 seconds)

Published: Tue Feb 16 2021