RxJS Scan Operator - How to Manage the State

Рет қаралды 8,068

Күн бұрын

Learn everything about Angular Forms 🚀
bit.ly/advanced-angular-forms...
👉 See All Angular Courses - bit.ly/discounted-course-bundle
Have you ever had a use case when you had an RxJS data stream and wanted to shape some state from it? Watch this video until the end, and you will learn how you can create and manage the state right in the stream so that you can deliver data right to the component template, bypassing the explicit subscription in your component and how to do it the way which scales, so you can easily add functionality state resetting or removing certain elements from the state, etc.
Thank you for your attention, and don't forget to share this video if you find it useful.
🕒 Time Codes:
00:00:00 - Intro;
00:01:38 - Disadvantages of the current solution;
00:03:04 - scan RxJS operator for rescue;
00:05:58 - Courses Promo
00:07:16 - How to reset state;
00:09:20 - Improving State Reset;
00:14:26 - Is RxJS still relevant in Angular;
00:15:45 - Outro;
🔗 Source code from the tutorial:
github.com/DMezhenskyi/managi...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi

Пікірлер: 78

@DecodedFrontend Ай бұрын

Follow me on other Social Media where I share short tips about Angular: Twitter - twitter.com/DecodedFrontend Instagram - instagram.com/decodedfrontend LinkedIn - www.linkedin.com/in/dmezhenskyi

@TheDomork Ай бұрын

I love the way you explain. You use the pure angular code and show a simple example for the non-trivial topic. Keep it on and have a nice and sunny day ;)

@DecodedFrontend Ай бұрын

Thank you for this feedback :) I glad to know that it was clear.

Ай бұрын

This is a really smart and elegant solution! thanks for that mate!

@dmytrotokarev Ай бұрын

As always very clearly and useful. Thanks!

@DecodedFrontend Ай бұрын

My pleasure! glad it was helpful ;)

@pedrofernandes2005 Ай бұрын

Thanks for another great video! This is actually very clever and useful.

@dat.nguyenquoc 11 күн бұрын

Thank you very much!!!!

@KamelJabber1 Ай бұрын

Excellent topic and presentation!

@DecodedFrontend Ай бұрын

Thank you!

@EmilioDegiovanni Ай бұрын

Invaluable content, dude!! We never finish learning new things about RxJS

@DecodedFrontend Ай бұрын

oh yeah... RxJS is the thing you can learn forever :D Thank you for your feedback :)

@johncerpa3782 Ай бұрын

Great video

@gagiksimonyan3782 Ай бұрын

Another useful video from Dmytro) always glad to see notifications from your channel)

@DecodedFrontend Ай бұрын

Thanks, Gagik!

@ugochukwuumerie6378 Ай бұрын

Thank you, super useful, learnt a ton from this.

@DecodedFrontend Ай бұрын

❤️

@AmarSingh-uw1db Ай бұрын

Gratitude for such valuable knowledge ❤❤❤

@DecodedFrontend Ай бұрын

Thank you :)

@timurbirgalin4704 Ай бұрын

Thank you for the video! That was really interesting and useful! When I started to work with Angular at my first job, it took me about four months to fully understand how to manage state and async events well:) Besides it was hard due to lack of good information about Angular. And I was so happy when I found your channel!

@rembautimes8808 Ай бұрын

Thanks Dmytro, I really like the way how the handler function is defined outside the stream logic making it easy to build very complex time based flows.

@DecodedFrontend Ай бұрын

Thank you for the comment :) Yep, I also like this pattern 😊

@emilsirbu236 Ай бұрын

How always a super valuable content! Man, you are in your mission, and we become better developers! Thanks Dmitro!

@DecodedFrontend Ай бұрын

I am happy to hear that! Thank you for your feedback 🙌🏻

@maximermoshin393 Ай бұрын

Thanks for sharing knowledge. You are always the best)

@DecodedFrontend Ай бұрын

Thanks you :)

@emanuelzhupa Ай бұрын

Great stuff, much needed 🎉🎉

@DecodedFrontend Ай бұрын

Thanks for your feedback, Emanuel!

@aleksandrm3466 Ай бұрын

Дякую, чудовий приклад.

@DecodedFrontend Ай бұрын

Радий це чути! Дякую за коментар 🙌🏻

@matiasbpg Ай бұрын

I loved the map to function pattern

@DecodedFrontend Ай бұрын

Me too :) Thank you for the comment!

@alphamarouanadiallo8238 Ай бұрын

Thanks you again, always top👌👍

@DecodedFrontend Ай бұрын

Thank you too!

@Melfice575 Ай бұрын

beautiful

@loko1944 26 күн бұрын

Not the solution I would use very often but I m a big fun of learning new things by examples like this. Perfect to know what is possible when it will be needed. Keep it going. Maybe some kind of cheat sheet with tricks like this would be helpful for people

@jeffnikelson5824 Ай бұрын

Expected you to show a signals approach at the end

@DecodedFrontend Ай бұрын

Hey 👋🏻, thanks for the comment. In my opinion, The only part where Signals would be justified in this case is using toSignal() instead of using async pipe, but I think it is too trivial to spend viewers' time on this :)

@denisgandzii1551 Ай бұрын

Dmytro, I think will be nice to receive from you something like short news about front end and in particular everything regarding angular. I would really appreciate. And big thank for what you are doing.

@TheSysmat Ай бұрын

Nice

@genyklemberg Ай бұрын

Really nice approach. Should one add this video as reference to the code added to the project?)

@TheOdin96 Ай бұрын

Dmytro, you are the man! 2 days ago I bought your course about hacking angular interview to revise some material before technical phase of interview. Today guy told me on a call that in his eyes he would guess that I have about 10 years of exp. Love you, keep it up

@DecodedFrontend Ай бұрын

Thank you for your feedback and I am very proud and happy of you :) Good luck with your new job!

@haroldpepete Ай бұрын

great video, thanks, i would like to see a video about angular query, the counterpart of react-query and maybe something about rx-angular/state

@DecodedFrontend Ай бұрын

Thank you :) your request is clear and taken into consideration👍

@vladimirv.443 Ай бұрын

Useful video, thanks! but the first case is more clearly and understandable + you have direct access to state

@DecodedFrontend Ай бұрын

Hey! Thanks for the comment. Yep, as I mentioned in the video, it seems a simpler solution at the beginning. However, it might become harder to manage especially if you have multiple sources over time update the state and resolution of the potential concurrency easier to resolve in rxjs using switchMap's, etc

@raji8527 Ай бұрын

YOu aer the best!!!!

@andreykositskiy649 Ай бұрын

Привіт. Дякую за твою роботу. Твій канал краще що я бачив по Ангуляру. Можеш порадити книжки які тобі допомогли в розвитку.

@popastefan6542 Ай бұрын

Could we see the comparison of this state management solution using rxjs operators to the one using signals? I bet the signals one is way more straightforward

@NoName-1337 Ай бұрын

I use this pattern for myself with some more stuff for some time. It’s great for async reactivity. As always, a great video. Thank you.

@DecodedFrontend Ай бұрын

Thank you so much for the comment. For me, this pattern worked also quite well 👍 If you experienced any issues with it, I would be happy to hear the use cases.

@NoName-1337 Ай бұрын

@DecodedFrontend The only issue is that it can become a bit bloated, so some functions (such as the handler functions you've implemented) are necessary. The most common use cases involve HTTP calls to the REST API. This pattern can initialize the scan state with the first subscription (toSignal). Data manipulation (CRUD operations) can be handled with subjects and switchMap, by merging them as you have done. ShareReplay can be handy too. If you need an example, just let me know.

@DecodedFrontend Ай бұрын

@@NoName-1337 Hi! Thank you so much for the detailed answer. I think I've got the general idea, but if you already have an example that can be quickly crafted without any significant effort, it would be perfect :)

@NoName-1337 Ай бұрын

@@DecodedFrontend I have sent you an email.

@oriel-elkabets Ай бұрын

Hi Dmytro, thanks for the video! I noticed that you used the spread operator to update the state of the array. I know that people often use it when updating reference values in signals, and I've seen other programmers do it this way. The question is: wouldn't it be better to simply use push to add the value to the existing array and return the same array? I understand that in signals, we must return a new array so that the signal emits the new value, and computed and effects react to it. However, in the case of using RxJS, I think it would work even without creating a new array. So why use it? I'm aware of the methodology of immutable values, but is it worth copying the whole array for this? Is it optimized in some way, such that there is no difference between this and push? I would love to hear your thoughts on this.

@hansschenker Ай бұрын

the accumulatorHandler is a reducer function, rename it to something like '...reducer' would help. This is Redux style programming in Rxjs, state is reduced by reducers inside scan operator.

@DecodedFrontend Ай бұрын

Yes, you're right. Actually, in the initial draft I had a direct reference to the reducer but eventually decided to go with more familiar 'handler' which would be familiar also for those who isn't familiar with reducer concept :)

@hansschenker Ай бұрын

@@DecodedFrontend ...handler creates the association to an EventHandler, but here you do not handle an Event, you run a state change function which is basically a reducer function. In my opinion it is important as a trainer or teacher to use the most appropriate terms to help the interested user for future understandings. The slogan on the Rxjs official website:'Think of RxJS as Lodash for events' is merley a marketing slogan and does confuse users more than it helps!

@beodan9219 Ай бұрын

magic :)

@anhquande 10 күн бұрын

"scan" operator can be considered as a reactive version of "reduce()" function

@deadlyecho Ай бұрын

Where were you man, missed your spicy vids 😂

@codeSurvivor Ай бұрын

Nice video, thanks a lot Dmytro! I completely agree with you regarding the usage of RxJS. From my point of view, I don't see currently that signals using effects if as good or powerful to manage async events. For reactive data management, signals is for me incredibly easier to use and powerful compared to RxJS, though. I think that a combination of both will be the way to go, at least for now. Also I have a question, I've seen in your videos that you navigate to Angular source code just form vscode. I guess you did some kind of inclusion of the Angular source in tsconfig.json or similar, but I cannot find out how to do it. Could you give me some hints? I find it very good for learning to read Angular source, and I'd like to be able to do it as easily as possible

@DecodedFrontend Ай бұрын

Hey 👋🏻 thanks for your feedback and your questions. Yes, the combination might work quite well (in my opinion) because none of those two can completely replace each other completely:) Regarding the source code navigation. I don’t have any tools for that and do it manually by switching to another VS CODE instance with the source code opened. This is just a result of post production processing where I cut the part where I am switching :)

@codeSurvivor Ай бұрын

@@DecodedFrontend All right! Thanks! Good video editing! :-D

@ExploringCodeCrafter Ай бұрын

Nices Video

@DecodedFrontend Ай бұрын

Thanks :)

@anandu06 25 күн бұрын

Could you please put the course in Udemy , it will be helpful ❤

@anastasiia6513 26 күн бұрын

👍👍👍👍👍👍👍👍👍

@radvilardian740 Ай бұрын

rxjs is not going anywhere

@DecodedFrontend Ай бұрын

Yep! 👍🏻

@arnauddusseldorp928 Ай бұрын

Great video, but what happens when you subscribe with a second async to the stream. Eg to show a list of dots in a table. Then there are two states.

@radvilardian740 Ай бұрын

@@arnauddusseldorp928 if 2 streams, then u need to handle them separately, or use some operators like takeWhile and takeUntil explicitly.

@DecodedFrontend Ай бұрын

@@arnauddusseldorp928 thanks for your question :) In this case, the second subscriber will have its own state, which might differ from the 1st one. If you need to share the state, you have to use the operator shareReply(1) after the scan(), which will share the state among subscribers.