Angular NGXS Tutorial – An Alternative to Ngrx for State Management
Written tutorial:
SUBSCRIBE if you enjoy!
Ngxs is a new state management solution for Angular. It's similar to Ngrx, but there are key differences; some of which we will take a look at in this ngxs tutorial. Let's get started!
– – – – – – – – – – – – – – – – – – – – – –
Subscribe for NEW VIDEOS weekly!
My site:
My personal FB account:
Coursetro FB:
Coursetro's Twitter:
Join my Discord!
^-Chat with me and others
– – – – – – – – – – – – – – – – – – – – – –
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
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.
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
If you could create a public GitHub repository of your final project and share it with us, it would be a lot easier for us. By the way, awesome tutorial. I really love it.
The simpler syntax of Ngxs is so much nicer than Ngrx. Thank you for helping me to understand this.
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.
very simple! Great work Gary.
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
How would you do async calls to a database, or use a service in combination with the actions?
thanks for talking about the static @Selector method in the state class. the docs are quite poor for ngxs…
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
@J4N 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 🙂
https://www.ngxs.io/concepts/state#async-actions
1. Now that you have global single store, Basically you can put your backend calls anywhere. But I would suggest to create separate service.
@JAY Yeah but who call this service? At which moment?
This seems like Redux pattern easy to understand but I wish there’s some middleware like Redux-Thunk or Saga to make async
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?
I like the ngxs approach better than ngrx , thank your for introducing this
It was very helpful for my project. thanks mate
Helpful tutorial. Thank you.
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)..
Good tutorial! A video about CRUD operations with the http client and ngxs would be great!
Yes ,I’m in support of this
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
Agreed
I’ve watched both ngxs and ngrx tutorials, they are very helpful. Thanks!
That was so cool. I love how much less we have to do comparted to NGRX.
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….
I agree ..full CRUD with NGXS with user item model with firebase backend. =:∆)