Тёмный

Make advanced Signals + RxJS state management easier WITH this new API 

Joshua Morony
Подписаться 74 тыс.
Просмотров 11 тыс.
50% 1

My Angular course: angularstart.com/
We recently looked at using the "connect" utility to make managing state declaratively in Angular a little easier using Signals and RxJS. This video covers a new addition to this API that makes things even nicer.
Previous video: • This ONE function make...
Source code: github.com/joshuamorony/angul...
Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076
Want to build mobile apps with Angular?: ionicstart.com
0:00 Introduction
0:31 What about toSignal?
1:16 A new API for connect
1:49 The issue
3:25 Using the 'with' function
#angular #rxjs #signals
- More tutorials: modernangular.com
- Follow me on Twitter: / joshuamorony

Опубликовано:

 

11 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 37   
@JoshuaMorony
@JoshuaMorony 6 месяцев назад
New newsletter goes out tomorrow: mobirony.ck.page/4a331b9076 - I've got a back log of cool Angular things around the web to share this week
@dominicbachmann4814
@dominicbachmann4814 6 месяцев назад
Thank you for this inspiring video. I think the code looks very clean! The only thing that concerns me a bit is that it's not fully typesafe so I would probably try to come of with a similar but typesafe solution. But again, cool video!👍
@rob.ale90
@rob.ale90 6 месяцев назад
What the heck is ngxtension? Everything gets so complicated :( I just wanna be cool, but i can't understand anything
@ChauTran
@ChauTran 6 месяцев назад
ngxtension is a collection of utilities for Angular. It sets out to be what I (and Enea) put in every Angular codebase we work on as of late but it's expanded into a kitchen sink of various things by the community. Fully declarative and reactive code can be complicated, but when you get passed the complication then the end result is much more predictable. State flow top down and only updated in a single place (of course, if you keep it that way)
@rob.ale90
@rob.ale90 6 месяцев назад
@@ChauTranOk. thanks for answering and contributing. My only concern is that this is not official and that's why it was confusing. Wish you the best!
@ChauTran
@ChauTran 6 месяцев назад
@@rob.ale90 Thanks for the kind words
@merlinwarage
@merlinwarage 6 месяцев назад
Joshua likes to overcomplicate things, but hey he is playing with the tools, and learning about them. All you need to do is understand the concepts, so you can use them when you really need them.
@punsmith
@punsmith 6 месяцев назад
It's Joshua needlessly over complicating things. Just downvote the video and pretend he doesn't exist as an Angular content creator.
@AlainBoudard
@AlainBoudard 6 месяцев назад
Great content as usual. I hope this will stabilize so that best practices with signals can be unified.
@JoshuaMorony
@JoshuaMorony 6 месяцев назад
Yes definitely think it's going to take some time for things to settle, but I'm really liking where things are headed
@Szergej33
@Szergej33 6 месяцев назад
Is this implementation typesafe? Like does it check if the type of the reducer arg is compatible with the observable source?
@JoshuaMorony
@JoshuaMorony 6 месяцев назад
Yep it's fully typed* (edit: see Chau's comment for clarification)
@ChauTran
@ChauTran 6 месяцев назад
Somewhat yes, but there's a subtle limitation. It compares the return type of the Observable and/or reducer to the Partial at the end. For example, if reducer returns ({ agee: 10 }) and the SignalState is { age: number }, then it will error out. This also means that when you return from your reducer, there's no intellisense as to what you need to return.
@javaman8844
@javaman8844 3 месяца назад
@JoshuaMorony I have been using rx angular with rx state which solves all these in same way long before signals. have a look at that
@roman.kamlykov
@roman.kamlykov 6 месяцев назад
Omg, there are 200+ functions in the rxjs library, why add more?
@alexandrponomarenko4100
@alexandrponomarenko4100 6 месяцев назад
Iguess it is more convenient to use ngrx/component-store for it. Or rx-angular lib. I know that you used it and maybe you can provide your thoughts how to realize it with component-store? Also it is very interesting how you can combine it with your original architecture and folder. Thanks a lot for your videos! It is really helpful
@adisilagy
@adisilagy 2 месяца назад
Hi, I was playing with your recommandation for the state management and declarative programming. (I have completed your course). I was wondering what would be your approach for a specific scenario. I have built a task management system, where I have lists panel shows all the lists and a label of how many incomplete tasks. When clicking on the list then I show the list of tasks belongs to that list. I have one smart component: UI components: 1. Lists 2. Lists Item I have two services one for the list and one for the task items. The issue is that I would like declarative when I check to complete or incomplete a task to change the number of incomplete tasks on the list panel. I have done it, but I would love to get your recommendation here
@JoshuaMorony
@JoshuaMorony 2 месяца назад
The general idea here should be that completing/incompleting a task would involve imperatively nexting a subject, which would then cause your source of data for "tasks" to be updated. The data that is being displayed in the UI for the incomplete tasks should be declaratively derived from your "tasks" source of data, and so it should react to that automatically when that data source is updated
@adisilagy
@adisilagy 2 месяца назад
@@JoshuaMorony I understand your approach, I did not wanted the incomplete tasks to derived from the tasks as I load only the tasks belongs to the list is being viewed. Where the menu shows all the lists and I get from the DB the lists with incomplete tasks.
@adambickford8720
@adambickford8720 6 месяцев назад
Doesn't that open you up to where the actual value of the signal is in a state that is impossible to be derived from the observable(s)? This feels like it violates 'purity' as you now have all kinds of 'out of band' updates that can happen to the value.
@ChauTran
@ChauTran 6 месяцев назад
you mean when we set the state of the Signal explicitly using Signal#set or Signal#update?
@adambickford8720
@adambickford8720 6 месяцев назад
@@ChauTran Exactly. From a FP PoV its a 'side effect'. It's like having a `sum` column in excel, but for some reason its value isn't the sum of its inputs. Even if the value is what you want, it feels like a bad idea.
@JoshuaMorony
@JoshuaMorony 6 месяцев назад
@@adambickford8720 yes this is a limitation/tradeoff of this approach - essentially this approach is allowing things to be declarative from the source up to where the signal is set with RxJS, and then it is also declarative after that point, but at that transition point from RxJS -> Signals there is a gap in declarativity. We have been working on this utility to help with that somewhat: ngxtension.netlify.app/utilities/signals/signal-slice/
@raybrockman4156
@raybrockman4156 6 месяцев назад
Putting aside CD issues for now, it seems like signals are an easy onramp for junior devs, and nothing more. We're spending a lot of energy to put signal's imperative dangers back into a declarative box. We might better spend our time learning declarative streams/state (rxjs) in our teams and master one tech rather than onboarding more. Regardless, thanks for your efforts here Joshua!
@user-my2bu5dm6j
@user-my2bu5dm6j 6 месяцев назад
1:17 The guy who lectured out about declarative code in just about every video is suddenly "OK" with having an unknown number sources of truth for a state. I don't get what is the advantage of connect. Would be much better to use "toSignal" in the regular case, and build some other kind of utility to CREATE a new signal declaratively from various "action" observables + reducers.
@JoshuaMorony
@JoshuaMorony 6 месяцев назад
It's a trade off to allow using signals as the state management mechanism which can greatly simplify things imo, but Chau and I have been building out something to allow a more declarative approach when using signals as the state management mechanism here: ngxtension.netlify.app/utilities/signals/signal-slice/ (same basic premise as the approach in the video done declaratively, basically pretty much what you are describing). I'll probably do a video on this soon.
@user-my2bu5dm6j
@user-my2bu5dm6j 6 месяцев назад
@@JoshuaMorony Wow this actually looks really good! I might consider introducing this to my team once we use signals more heavily (we waited for them to be out of dev preview) Looking forward to a video on this
@botondvasvari5758
@botondvasvari5758 6 месяцев назад
does this really need this much complexity. Frameworks should make things simplier.
@punsmith
@punsmith 6 месяцев назад
Joshua to the rescue, making things even more complicated and meandering.
@mansoorabdullah
@mansoorabdullah 6 месяцев назад
Why ngextension when we have rxState
@ChauTran
@ChauTran 6 месяцев назад
ngxtension is a collection of utilities rather than just dealing with state. There are things like gesture handlers, resize... If you don't use something (like the state management side of ngxtension), you don't have to pull it in and it will never be part of your bundle
@user-hs9uf8fg5k
@user-hs9uf8fg5k 6 месяцев назад
your error$ stream is not working and not update state.... it is working if catchError put in connect...it is fail working, morony
@JoshuaMorony
@JoshuaMorony 6 месяцев назад
Can you give me the time code for where it isn't working?
@user-hs9uf8fg5k
@user-hs9uf8fg5k 6 месяцев назад
@@JoshuaMorony try in loadChecklists method return throwError....and u state error did not update
@lucasgiunta8874
@lucasgiunta8874 6 месяцев назад
So angular is becoming the most annoying framework in a js world: redux pattern, BUT with signal & observable. omfg. I already regret angular < 16.
Далее
ngTemplateOutlet is WAY more useful than I realised
16:36
Can a Bear Trap Actually Cut Off Your Hand?
00:48
Просмотров 4 млн
ASMR CORTE DE CABELO COM EMOÇÃO
01:00
Просмотров 3 млн
Looking Under the Hood of JavaScript
6:34
Просмотров 176 тыс.
The easier way to code Angular apps
9:54
Просмотров 64 тыс.
Want to build a good API? Here's 5 Tips for API Design.
10:57
There was a flaw in my Angular mental model
4:50
Просмотров 11 тыс.
RAG from the Ground Up with Python and Ollama
15:32
Просмотров 22 тыс.
Everything You Need to Know About React 19
21:42
Просмотров 13 тыс.
My NEW default for state management in Angular
6:21
Просмотров 29 тыс.
Solving one of PostgreSQL's biggest weaknesses.
17:12
Просмотров 173 тыс.