RxJS Scan Operator - How to Manage the State

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

[@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!

[@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 :)

[@loko1944]

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

[@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 😊

[@andreykositskiy649]

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

[@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!

[@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 🙌🏻

[@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.

[@maximermoshin393]

Thanks for sharing knowledge. You are always the best)

[@DecodedFrontend]

Thanks you :)

[@pedrofernandes2005]

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

[@dmytrotokarev]

As always very clearly and useful. Thanks!

[@DecodedFrontend]

My pleasure! glad it was helpful ;)

[@aleksandrm3466]

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

[@DecodedFrontend]

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

[@alphamarouanadiallo8238]

Thanks you again, always top👌👍

[@DecodedFrontend]

Thank you too!

[@KamelJabber1]

Excellent topic and presentation!

[@DecodedFrontend]

Thank you!

[@matiasbpg]

I loved the map to function pattern

[@DecodedFrontend]

Me too :) Thank you for the comment!

[@gagiksimonyan3782]

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

[@DecodedFrontend]

Thanks, Gagik!

[@johncerpa3782]

Great video

[@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!

[@AmarSingh-uw1db]

Gratitude for such valuable knowledge ❤❤❤

[@DecodedFrontend]

Thank you :)

[@ugochukwuumerie6378]

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

[@DecodedFrontend]

❤️

[@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

[@emanuelzhupa]

Great stuff, much needed 🎉🎉

[@DecodedFrontend]

Thanks for your feedback, Emanuel!

[@genyklemberg]

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

[@Melfice575]

beautiful

[@TheSysmat]

Nice

[@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.

[@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 :)

[@raji8527]

YOu aer the best!!!!

[@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👍

[@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!

[@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

[@beodan9219]

magic :)

[@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.

[@deadlyecho]

Where were you man, missed your spicy vids 😂

[@ExploringCodeCrafter]

Nices Video

[@DecodedFrontend]

Thanks :)

[@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

[@anandu06]

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

[@anastasiia6513]

👍👍👍👍👍👍👍👍👍

[@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.

[@artstar991]

Monster