Angular NGXS Tutorial - An Alternative to Ngrx for State Management

[@abirmahmud3903]

You taught the basics of Ngxs very specific and precisely only in 20 minutes. Very helpful for beginners.

[@utkarshpant5297]

Can you please make a tutorial on Akita State Management

[@thomaslohmann9361]

Good tutorial! A video about CRUD operations with the http client and ngxs would be great!

[@esra_erimez]

Agreed

[@victorharuna8647]

Please I'm a beginner,I will appreciate if I have a link to a full course ,I don't mind paying for it,I'm seriously desperate to learn ngxs for my state management

[@victorharuna8647]

Yes ,I'm in support of this

[@ManasKumar-lk6lw]

please have a video on Unit testing/integrated course with ngxs

[@FidelGuajardo]

The simpler syntax of Ngxs is so much nicer than Ngrx. Thank you for helping me to understand this.

[@nonfaktor5215]

thanks for talking about the static @Selector method in the state class. the docs are quite poor for ngxs...

[@DesignCourse]

Just yesterday, Jeff from the "Angular Firebase" channel did a tutorial on the same subject if you want to learn more: kzbin.info/www/bejne/gp_JZ62MorVmgsU

[@MStoica]

Hi, Link leads to a short video (6s) that just says "Hey Google!". I think it was changed in the meantime? I suppose it's this one: kzbin.info/www/bejne/iXjNYmSgac2ro8k Both great introductions! Any plans for a course on Redux with Angular, that uses NGXS instead of NGRX? :D

[@jayaraut]

can you tell about mocking store and state( specially @Selector()) using karma jasmine.

[@JayTailor45]

That was so cool. I love how much less we have to do comparted to NGRX.

[@abhijitboda]

can you explain why you user "static readonly type= 'something'" while it was never used somewhere else?

[@jinxiantan5121]

That is the name of the state, must be unique.

[@akshatahegnaik7887]

Type 'Tutorial | null' is not assignable to type 'NgIterable | null | undefined'. getting this error - could you please help me sort this.

[@f19-x9k]

Hi, on your read component instead of assigning the variable tutorials$ type Observable, just declare it, without defining any type, that is, just type tutorial$;

[@kandanceferguson7102]

@@f19-x9kCan you explain why? Just trying to make sense of the error. Thank you!

[@davidhenzl1871]

@@kandanceferguson7102 I just changed type Observable to Observable. I think that array of Tutorials is iterable, so there is no error :)

[@daking9629]

i am 17 years old and you are best channel on youtube

[@DesignCourse]

Hey, thanks!

[@chrischappell7643]

u should do homework and learn more about your shool's lesson instead of see this, LMAO

[@DesignCourse]

Hell no Edric! This is the best type of education: stuff that you can use in the real world. School is largely busy work and remembering to forget. ;)

[@daking9629]

I have a game site and I earn a lot of money and I'm still studying I want to become a programmer and I will specialize in this field so What is the problem of starting from now?

[@magomedsouleymanov9946]

Stop saying shi. please ! This is the right thing to learn ! Instead we would like to see people like you staying on university and homework level. RESPECT TO YOU BRO IF YOU ARE 17 AND IF YOU UNDERSTAND THIS.

[@ronjaknudtsen5908]

How would you do async calls to a database, or use a service in combination with the actions?

[@solderon]

Hello, thanks for the content very clear and easy to understand, although, the fetch tutorials action is missing (I'm saying this as I'm used to adding fetching tutorials into the store pattern with NgRx) So I would appreciate it if you could add this part to your tutorial, so I can see if I'm doing it the right way :p

[@agnieszkalundy3434]

I've watched both ngxs and ngrx tutorials, they are very helpful. Thanks!

[@ramanha6097]

The Written tutorial link is broken

[@MultiShiv19]

Hi Gary, I wanted to know, at 4:02 why you prefer to import Tutorial from `./../` instead of simply doing `../` ?

[@carrillocarlosce]

It's very good to know that you are making this effort to bring us the last and new tecnologies out there, very thank you for you very well explained tutorials (y)..

[@hermesherrera2659]

very simple! Great work Gary.

[@j4nch]

Where the call to the backend would be placed? I'm not huge fan of having to create those effects in NGRX and duplicating everyting in 3 differents actions? (Still waiting for the follow up video ^^). 2 years after, would you still consider it for a project?

[@irhamputra3666]

This seems like Redux pattern easy to understand but I wish there's some middleware like Redux-Thunk or Saga to make async

[@andresm9051]

Great video, one question can I have multiple states like tutorials[] and userProfile or do I need to use one global interface that gather up userProfile and inside of it tutorials[] ? thanks a lot.

[@rembautimes8808]

Good tuto-rail 😃. Helps explain the concept

[@nielsSavantKing]

But if I click a item for removing it will open a new tab

[@geocine]

I like the ngxs approach better than ngrx , thank your for introducing this

[@j4nch]

Two questions: 1) Where would you put the logic to update the backend? 2) I cannot figure out what is the point of having "Actions"? What is the advantage between this and calling directly a method on the store to update? That would reduce the amount of code and remove this cumbersome payload declaration. Same with getState/patchState, why this is not defined in a parent class

[@JayTailor45]

1. Now that you have global single store, Basically you can put your backend calls anywhere. But I would suggest to create separate service.

[@j4nch]

@@JayTailor45 Yeah but who call this service? At which moment?

[@JayTailor45]

@@j4nch You would add service call in the actions. So main logic will lies in the action and you don't have dependency on the component. If you add calls in the action then on component. You would just need to dispatch new action. For example: this.store.dispatch(new Login(email, password)); Check this doc. It will give you more clarity on what I want to say :) www.ngxs.io/concepts/state#async-actions

[@laytonmiller5865]

Good tutorial, thanks. It looks like its very similar to ngrx. I am wondering how those store files will scale with all actions/selectors etc in there. I really like the usage of decorators, helps clarify intent.

[@aradazad3092]

Please Turn subtitle contributions on for all videos

[@ningzedai9052]

Does anybody know how to use ngxs router to navigate back/forward ? There is only one action provided by ngxs for navigation which is 'Navigate' class. Does ngxs have the similar actions such 'go', 'back', 'forward' that are provided in NgRx ?

[@int3rhard]

Please, add video how to use @ngxs/effect. Thanks!

[@agasthya3693]

Thers no such thing called @ngxs/effects. In NGXS we have only Action and Store. GoodBye reducer and effects

[@gulaykulekci8728]

Helpful tutorial. Thank you.

[@robbiesmith79]

I got all the way to the end until you switched the tutorial$ out for a @Select decorator. Got this error now: ERROR in src/app/read/read.component.ts(17,6): error TS2345: Argument of type 'ReadComponent' is not assignable to parameter of type 'ComponentClass & Record'.

[@robbiesmith79]

I figured it out. @20:02, that line should be (added the array[] because the TutorialState has a defaults section with an array of tutorials): @Select(TutorialState.getTutorials) tutorials$: Observable

[@jamesbest2221]

Thanks so much Gary! Awesome!

[@DesignCourse]

Thanks man!

[@jeffleigh5291]

Something I'd like that I haven't seen done yet is a tut on ngxs that covers how you accomplish the same thing as ngrx effects but using ngxs

[@manjunathah5857]

Good Introduction for NGXS.. Thanks

[@oleersoy6547]

Gary - What do you think of this: github.com/datorama/akita It comes with a CLI and it looks like we can just add a @AkitaStore decorator to models and have the Akita CLI generate all the code for the Stores...we have to do this to get intellisense ...

[@ergceme]

It was very helpful for my project. thanks mate

[@kamalkamals]

That's a good simple example to explain how use NGXS, but what about effects ?

[@StefanoGabriele1983]

Kamal Sahmoud i think that the effects in redux are the @action in ngxs

[@reddyashok9]

That's a great one. Thank for the vlog

[@nurboljalmukhambetov4231]

Gary,Thank you for your videos!!! Your videos so cool and awesome!! Hello from Kazakhstan!!!)

[@nanasarathi]

Nicely explained... Thanks

[@imhappynow8471]

Thank you so much for the great intro.

[@sveinsoermo9883]

Very good video and the same goes for ngrx ones. Can U PLS make an example with NGXS using a data source, say Firestore. Very much thx in advance..:-). BTW NGXS looks to me as a better choice than ngrx....

[@pattierney6845]

I agree ..full CRUD with NGXS with user item model with firebase backend. =:∆)

[@andresgutierrez3965]

thanks for the video

[@spragucm]

Fantastic

[@AdamChad-v8u]

Uriah Park

[@alxizr]

@DesignCourse #DesignCourse really hope you read this! I wonder, do you copy from other tutorials just for the sake of pushing videos to KZbin? It seems that you do not really understand what you are doing or trying to achieve. All your Angular related videos are published after alot of other videos published by other developers/youtubers (nevermind their names but i am sure you know who i am talking about) who actually know their business and can provide better flow and explanations. Word of advise, if you don't know something then don't fake it till you make it. 30 minutes of video where 10 spent for promotion and other bs, another 10 for the specific content and the last 10 for prolonging with no reason.

[@DesignCourse]

Johnny, if you look at the release dates of my Angular tutorials/crash courses, you'll find that 90% of them come out very soon after a new release of Angular, usually well before any other KZbinr. "Angular ngrx" on KZbin shows 1 video older than mine from what I can see (one I never watched). Maybe the opposite is my problem? Maybe I should study up more if you feel I don't know the subject well enough? 🤣 And dude, come on, 10 minute promo? In this 28 min video, the content starts at 1:30.

[@DesignCourse]

Also, this particular video is a bit older and definitely around the time I likely just started learning about ngrx. I'll be the first to admit if there's something I don't understand, and maybe at times I do screw up certain topics, but I don't ever rush or intentionally put out content that will get me raped by the subscribers. Overall, I've done pretty well at that with something around 97.5% like to dislike ratio. This particular video is def. on the weaker side. Thanks for the input though.

[@alxizr]

@@DesignCourse I never meant to burn you, if you know what I mean. I believe that you approach to an audience who is getting into development and less to those who are more experienced and that may reflect on the like/dislike ratio. This particular video is about ngxs a topic which I am doing research about. I was looking into a lot of resources to see what is out there tutorial wise and this video was not as good as I thought it to be. I also watched other videos you made and they are better by all means. I'm assuming that other topics you are more comfortable with because you practice them on a daily basis at your work. State management takes time to sink in, no matter how good of a programmer one is.

[@DesignCourse]

@@alxizr oh this is NG..X..S, my bad, thought it was NGRX. Yeah, at the time of releasing this vid, it was very new.

[@alxizr]

@@DesignCourse and you promised follow ups for this topic. we will be waiting. Maybe you should create a whole series about it here on KZbin then we all can bebefit from it.

[@moisesalvinmiguelflores923]

If there's a problem importing: NgxsReduxDevtoolsPluginModule NgxsLoggerPluginModule Just run this: npm run postinstall

[@tiago9488]

Thanks a lot Gary! Awesome!