RxJS Scan Operator - How to Manage the State

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

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

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

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

[@message59]

thank you so much for all the great content :) you have a great way of explaining things 👏🏼

[@vt9988]

Great Video thanks a lot. I would love to see how you explain the ngrx state management

[@cryptoptiker]

Perfect content as allways. thank you dimi

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

[@dmytrotokarev]

As always very clearly and useful. Thanks!

[@DecodedFrontend]

My pleasure! glad it was helpful ;)

[@KamelJabber1]

Excellent topic and presentation!

[@DecodedFrontend]

Thank you!

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

[@ugochukwuumerie6378]

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

[@DecodedFrontend]

❤️

[@gagiksimonyan3782]

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

[@DecodedFrontend]

Thanks, Gagik!

[@AmarSingh-uw1db]

Gratitude for such valuable knowledge ❤❤❤

[@DecodedFrontend]

Thank you :)

[@bancamilleri1546]

Got to love some good old currying. I'd love to see more videos on more advanced usage of RxJS and how to tie together Signals nicely :)

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

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

[@dasvas9383]

Спасибо, Дима, как всегда круто)

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

[@maximermoshin393]

Thanks for sharing knowledge. You are always the best)

[@DecodedFrontend]

Thanks you :)

[@matiasbpg]

I loved the map to function pattern

[@DecodedFrontend]

Me too :) Thank you for the comment!

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

[@pedrofernandes2005]

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

[@genyklemberg]

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

[@aleksandrm3466]

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

[@DecodedFrontend]

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

[@andreykositskiy649]

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

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

[@enverusta7811]

It was really helpful!

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

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

[@emanuelzhupa]

Great stuff, much needed 🎉🎉

[@DecodedFrontend]

Thanks for your feedback, Emanuel!

[@sergiim5601]

Great content, as always

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

[@dat.nguyenquoc]

Thank you very much!!!!

[@alphamarouanadiallo8238]

Thanks you again, always top👌👍

[@DecodedFrontend]

Thank you too!

[@johncerpa3782]

Great video

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

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

[@anhquande]

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

[@enverusta7811]

Since we might need to use those handlers in other lists too, I implemented them in a more generic way like this: ```function removeHandlerFn(indexToRemove: number) { return (state: T[]): T[] => state.filter((_element, index) => index !== indexToRemove); } function resetHandlerFn(event: void) { return (state: T[]): T[] => []; } function accumulatorHandlerFn(value: T) { return (state: T[]): T[] => [...state, value]; } function scanHandlerFn(state: T[], stateHandlerFn: (state: T[]) => T[]) { return stateHandlerFn(state); }``` Also used them like this: ```ages$: Observable = merge( this.reset$.pipe(map(resetHandlerFn)), this.remove$.pipe(map(removeHandlerFn)), this.debouncedAge$.pipe(map(accumulatorHandlerFn)) ).pipe(scan(scanHandlerFn, []));```

[@Melfice575]

beautiful

[@raji8527]

YOu aer the best!!!!

[@TheSysmat]

Nice

[@beodan9219]

magic :)

[@anandu06]

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

[@deadlyecho]

Where were you man, missed your spicy vids 😂

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

[@ExploringCodeCrafter]

Nices Video

[@DecodedFrontend]

Thanks :)

[@anastasiia6513]

👍👍👍👍👍👍👍👍👍

[@artstar991]

Monster