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

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

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!

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

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 😊

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

As always very clearly and useful. Thanks!

@DecodedFrontend

Ай бұрын

My pleasure! glad it was helpful ;)

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

It was really helpful!

Thank you very much!!!!

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

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

@DecodedFrontend

Ай бұрын

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

Great video

Excellent topic and presentation!

@DecodedFrontend

Ай бұрын

Thank you!

Great content, as always

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

@DecodedFrontend

Ай бұрын

Thanks, Gagik!

Great stuff, much needed 🎉🎉

@DecodedFrontend

Ай бұрын

Thanks for your feedback, Emanuel!

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

@DecodedFrontend

Ай бұрын

❤️

Gratitude for such valuable knowledge ❤❤❤

@DecodedFrontend

Ай бұрын

Thank you :)

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!

Thanks for sharing knowledge. You are always the best)

@DecodedFrontend

Ай бұрын

Thanks you :)

beautiful

I loved the map to function pattern

@DecodedFrontend

Ай бұрын

Me too :) Thank you for the comment!

Thanks you again, always top👌👍

@DecodedFrontend

Ай бұрын

Thank you too!

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!

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

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

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

Nice

YOu aer the best!!!!

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.

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

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👍

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, []));```

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.

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

magic :)

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!

Where were you man, missed your spicy vids 😂

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

Nices Video

@DecodedFrontend

Ай бұрын

Thanks :)

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.

👍👍👍👍👍👍👍👍👍

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

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

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.

Monster