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

[@DecodedFrontend]

🔥🔥🔥Do you want to master *Angular Material Themes* like a PRO? Check out my new Workshop where you will find a lot of advanced tips & tricks which will help you to make your themes maintainable, lean & consistent! Limited 50%-off discount is about to expire very soon: 🔗 bit.ly/angular-material-theming-workshop 🔥🔥🔥

[@giorgimerabishvili8194]

This is definitely the best channel about Angular on KZbin! Big thumbs up and thank you very much!

[@coldcircuit99]

I would say the most informative, not many go for going deep inside single subject but this channel does.

[@emmoldovan]

I really love this channel. I've searched for advanced Angular topics for a long time. I'm glad I found you!!

[@DecodedFrontend]

Thanks! Welcome aboard! ;)

Yeah it's really hard these days to find Advanced Angular topics like they are on this channel! im abs subscribing

[@giorgimerabishvili8194]

Just shared your channel in large (more than 50k people) Angular group on Facebook. I'm sure you'll be overwhelmed with subscriptions soon : ) And you really deserve it bro

[@DecodedFrontend]

Wow! Thanks a lot for support!! 👍🏻

[@vatsalkgor]

I'm glad that I'm one of the early subs of your channel, Dmitro! I'm pretty sure the channel will definitely grow to 200k subs in no time! Keep up the good work!

[@DecodedFrontend]

Hi Vatsal, Thank you for staying with me so long time :) I hope you prediction will come true soon 😉

[@gonzalocorchon6509]

I had a teacher who taught us NGRX for Angular 6 and he said it very clearly: NGRX is not going to make you work less or simplify your tasks, it will only help you organize your code when you have many components at different levels that share their state, in any other scenario it will probably add unnecessary complexity to your project. I still think he was right after several years developing Angular projects and it's great to see that you also share that point of view. I have watched several updated tutorials to see if something had changed since I learnt it and in the end I always come to the same conclusion, for the kind of projects I do and the people working on them it is better to follow the KISS principle and not overengineer anything.

[@DecodedFrontend]

Your teacher was right but I think he meant Redux architecture itself because NgRx is just an implementation of REDUX :)

[@gonzalocorchon6509]

@@DecodedFrontend Yep, surely he meant Redux ;)

[@DecodedFrontend]

Before we start to code anything with NgRx I just wanted to put my thoughts about State Management and when we should rather go with Redux architecture. What do you think? In which scenarios Redux architecture beneficial and when it is better to go just with simple services. Let's discuss :)

[@p.s29]

Man! I love your videos!! Much Appreciated!

[@DecodedFrontend]

Glad you like them! :)

[@oleksiidashko9510]

this is the best thing I watched on the topic of NgRx in all rus💩an and English speaking KZbin

[@rhea8133]

You are one reason i started liking studying and gaining knowledge outside work. Thank you so much.

[@parthupadhye]

Excellent content and tips. Has helped already to clarify why I am better off staying away from ngrx. Project is too small, simple and a quick MVP. Thanks.

[@timtim9o5]

The clearest explanation of the redux pattern I've heard yet, and done so nonchalantly. You're impressively concise. This was great, thank you very much!

[@webmandman]

Great video bro! Can’t wait for the next one ☝️

[@DecodedFrontend]

Thank you! Coming soon! ;)

[@KamelJabber1]

Great topic and content. Looking forward to the upcoming video in this series. Thanks!

[@DecodedFrontend]

More to come! Thanks ;)

[@davidwang5445]

Good presentation! Clear, objective. Thank you.

[@oletrn]

Thanks for the great video, Dmytro! This is exactly what I needed to hear now that I'm evaluating whether I should keep NgRx in an old, small project (current implementation is such an overkill in my view), or get rid of NgRx and come up with my own state management service.

[@expertreviews1112]

I use Datorama Akita and love how it manages state…

[@denisgandzii1551]

What do you think about NGXS? I found it very intuitive and it work fine and simple even with medium app. Would be cool to have a separate video regarding NGXS and comparation with NGRX with plus and minus.

[@art_bat]

NGXS is a much better Redux-like library than NGRX. Avoids the weakest points of Redux, that NGRX decides to repeat (the insane level of boilerplate needed to comply with the pure reducer dogma) while keeping the best parts of NGRX: the RxJs Observable Store. NGXS reducers (states), beside being pure, obliterates that dogma and can also return promises or observables: this means no need for "effects" or "sagas" and also no need for 3 actions (request/fail/success), only one action and the library handles the update The action "reducer" can execute side effects, calling async services and even dispatching another actions, and the library generates the new state when those promises or observables complete (or fail) If you also use immer in the reducers, the amount of boilerplate avoided makes to use Redux as simple again as the deceptive TODO examples without side effects used at first to conn us into it 😏

[@giorgimerabishvili8194]

I'm looking forward to NgRx series : )

[@ArunKumar-yd8qi]

Thank You, Clean and Well explanation. expecting more videos on this. From India.

[@DecodedFrontend]

More to come! thank you :)

[@shivanigaddagimath6105]

Hi Arun! Would you be interested in exploring job opportunities in web development? We are a web development company and looking for developers. Let me know if interested!

[@MrBau25]

Great video, Dmytro! Like all of the other ones from this channel! Definitely the first place where I come to check something about Angular! :D Did you managed to make the part 2 of this video? With the application?

[@otmanm4095]

Best explanation so far !

[@lindermannla]

Excellent video. Very enlightening. Congratulations!

[@the-real-pawook]

I came to a project where NGRX was added because previous engineer came from React and didn't know how Services work. 2 years passed, still partly stuck with NGRX that doesn't solve anything in our scenario, but gives a constant mental disorder to anyone who tries to understand what is going on. My takeaway from this is that you need a solid reason otherwise you don't need it.

[@DecodedFrontend]

Absolutelly agree!

[@volodymyrusarskyy6987]

Hard to imagine that someone doesn't really know about services pattern nowadays 🤔 Secondly, Ngrx is not about storing data and replacing services layer (actually, you have it anyway, it is just called differently). Maybe this dev was targeting another problem? May I ask how big is the app and how many devs are supporting it? How would you implement it without Ngrx?

[@vandanan9749]

Thank you for all the videos..u r doing a wonderful job..Could you pls do a video on asynchronous programming angular,ngrx implementation,best practices using typescript,etc..I might add more;)..

[@mayanksati1842]

Is the ngrx series out? Really liked this video and wanted to learn more.

[@DecodedFrontend]

Hi Mayank! No, it didn't out yet. There were some reasons why it was postponed but it will out because of it was requested by many people.

[@wolfisraging]

Awesome video as always :)

[@L0kiTheGhost]

Hi, I just binge watched all your Angular videos, very interesting stuff. Are you planning on doing other custom Material components like a dropdown with a search input inside when you toggle it? I've seen this on gitlab and github

[@DecodedFrontend]

Hi, I actually have similar videos. Check out this one: kzbin.info/www/bejne/epzLYa2mqMhjkNk then this one kzbin.info/www/bejne/epzLYa2mqMhjkNk and these 2 kzbin.info/www/bejne/boXLh6KcZbetbJY , kzbin.info/www/bejne/d4vWqGWkh92eeM0

[@samuelpariona7870]

what are your thoughts on NGXS?, great video man

[@DecodedFrontend]

Thank you! Tbh I didn’t try it yet, so I can say nothing so far ☹️ but once I have some experience I will make some videos

[@chinthanagunasekara7469]

its really good one. still I'm thinking redux and ngrx makes application more complex. but still i'm using services for state management

[@RajibGangulydesignerg]

just to say, i love your video. just keep it up

[@DecodedFrontend]

Thanks :)

[@shivanigaddagimath6105]

Hi Rajib! Would you be interested in exploring job opportunities in web development? We are a web development company and looking for developers. Let me know if interested!

[@ayoubaitlachgar]

Thank You for handling the subject differently. A Good Software engineer should always be able to define the WHY's of using each technology. Not a follower to any new trend or fancy tech

[@DecodedFrontend]

Absolutely, Ayoub!

[@haroldpepete]

great explanation about this controversial topic, some developers take redux because is the new fashion but the don't see the real benefit to integrate this tool to the project, sometimes is not required, by the way you must make a video teaching what is the correct pronunciation of your name

[@lockness2304]

Could you please make use of 'Indefinite articles'? It would greatly improve your comprehensibility.

[@syimykamatov8955]

Thanks for sharing your opinion!

[@nikhilgoyal007]

This is gold! thank you!!!

[@tomaszbj]

cool channel and easy clear informations, thx!

[@sroDrakso]

Awesome chanel. Keep going!

[@vivekraj1427]

Really very informative but where are the following videos on redux.

[@GuillaumeMaka]

Thanks for the video! Any thoughts about akita or ngneat/elf ?

[@mykolastrashok9986]

Thank you for this video.

[@DecodedFrontend]

You’re welcome 😊

[@patilrohan]

Can you please make a video on MobX state management using Angular

[@its_vincesanity]

I don't really understand what problem Redux would solve. Because my project is big, it's not really convincing. Sharing data through independent components is also easy doable, with a Subject. Can someone put it clear, why I should implement such a heavy thing in my application?

[@envo2199]

if you can use subjects and access them as observables, literally no advantage of using this imho.

[@DjSilent]

Thank you for your thoughts. Do you work with cypress?

[@DecodedFrontend]

I have a little experience. Positive experience I have to say :)

[@DjSilent]

@@DecodedFrontend yeah I am having an enjoyable experience however angular cypress cucumber training videos are very hard to come by. I would like one to cover routes that have resolvers and guards Any how keep up the good work

[@mib8254]

Im using akita to handle state management. Its more angularish then the famous ngrx.

[@alaakhalila9022]

Hello decoded, I'm confused why do we use NGRX if we can make a global service and inject it in 'root' ??

[@ihor-pidhornyi]

So if I'm starting a new project in company, I shouldn't be considering Redux, but if I'd see that the app grows and I have started write services in my own conventions, I should migrate to NGRX. In this case I want to ask a question, do I need to rewrite existing services into a Redux, or just start with only new ones. Of course this question depend on how much time I have, but overall, would it be better to rewrite most services into the Redux?

[@DecodedFrontend]

it is very hard to say without any knowledge about the project, but in general, theoretically, you could write new features using NgRx and then incrementally migrate the old ones. Also, to simplify the future migration, I would say that you could build some abstraction around services that are responsible for state management. For inspiration, You can also have a look at Facade Pattern that could help to make your components "independent" from the concrete implementation of your state management, so when you migrate to NgRx you wouldn't need to touch at least your components. Yes, it has some prose and cons but... please show me what doesn't have them :)

[@ihor-pidhornyi]

@@DecodedFrontend I understand that's hard to give more detailed answer, but thx anyway. Also wanted to ask you about services, in video you said it's ok to use them. By that you meant stateless services with just server calls or stateful services with subjects that can hold some data. Previously had discussion in which one person said it's not okay to use subjects for holding state, because it's not rxjs' task to handle state. At some point I'd agree with him, but I don't think there is such a radical answer. So my last question, if you don't mind, is about services, and what you meant by them, from above told.

[@DecodedFrontend]

@@ihor-pidhornyi I meant mostly stateful services that hold state in BehaviorSubject (but can be applicable for any statefull service). I don't know the details of the discussion and what your collegue meant exactly but IMO it is ok when you store the state in BehaviorSubject. There is co-called "Push-Based" architecture that is basically build on top of this idea. Also, if you have a look at the source code of NgRx, you will see that the State there is represented as a sub-class of BehaviorSubject... so... :) github.com/ngrx/platform/blob/master/modules/store/src/state.ts

[@ihor-pidhornyi]

@@DecodedFrontend Heh, really. I think mostly the way you do about Behaviour Subjects and I think he is just kind of person who has strict views on something. Btw, he uses mobx with angular and says it's very comfortable, so I'm trying now to research a lot of resources and decide which way I should go. Thanks a lot for your answers 😊❤️

[@MarcellodiSimone]

Did you notice that the light spot on your back wall shows 45 then at about 2:50 it shows 43 and at 4:45 its 47

[@andylib]

What do I do when I know the project will be huge but is using GraphQL? Is the risk of having two sources of truth still given?

[@DecodedFrontend]

Hi Andy! Until you’re not combining it with Apollo client you shouldn’t encounter the issue with 2 sources of truth.

[@andylib]

@@DecodedFrontend that’s interesting 🤔 unfortunately I haven’t tried apollo yet so that I could understand why exactly it would be a problem - but I guess I’ll find out soon enough 😁

[@DecodedFrontend]

@@andylib the problem is that Apollo Client also implements its state management and it has its own store (cache), basically like a Store in NgRx which automatically introduces „2 sources of truth“ issue. Unlike NgRx where you update store using Actions and reducers in Apollo Client you interact with a Apollo store via GraphQL queries/mutations. You just have to check both and pick the one which better fits to your team and project requirements and go with it

[@andylib]

@@DecodedFrontend Thank you for your insight 😊🙏🏻

[@umermalik2907]

Which is better ngrx vs ngxs ?

[@ahmedsokar2909]

Great

[@Шакал-к6н]

Прикольна чо, спс за информацию

[@daviddonadze221]

I love NgRx

[@Stevexupen]

MVP means Minimum Viable Product, not minimum valuable project

[@emberarc]

OK, but what is 47?

[@Koldraon]

Maybe Dmytro is a fan of Hitman Game Series? ;-)

[@mohamedelhawy4124]

💌

[@rezyadlf]

I guess for prototyping and small projects angular not fits at all.

[@ilnurryazhapov]

why is the number 45 on the wall? 😂

[@DecodedFrontend]

Haha indeed lol! now I can't stop to see 45 as well 😂

[@minigeek]

Hehe.. me in the video👹

[@DecodedFrontend]

Hope you don’t mind? 😉

[@minigeek]

@@DecodedFrontend haha why would I😹

[@coldcircuit99]

simple answer, nope not at all.

[@DecodedFrontend]

:D I actually tend to agree with you but I wouldn't be so radical. There are apps where it make sense but very often it is being misused :)

[@coldcircuit99]

@@DecodedFrontend i generally am against using unnecessary 3rd party libraries within angular framework and with perfectly fine data management that services provide redux really in 99% of cases is unnecessary solution to keep global state.

[@GLawSomnia]

I actually agree with you. Services with Subjects is most of the time enough and actually cleaner and more straightforward to implement. We implemented some part of our project (started refactoring it to use ngrx, but time didn't allow us to finish). But its a real pain to come back to it after some time of not using it.