NGXS - Angular State Management
Vložit
- čas přidán 28. 07. 2024
- Learn how use an exciting new state management library for Angular. In this episode, we get started with NGXS and compare it to NgRx. angularfirebase.com/lessons/n...
- NGXS ngxs.gitbook.io/ngxs - Věda a technologie
❤️❤️❤️ the video! Thanks for building this great content and sharing with us!
Thanks for building a great library! Excited to see where it goes :)
Adopting NGXS on my next project.
I will update all my apps with NGXS. Austin thanks for making possible easy state management with Angular!
NGXS is taking the Angular world by storm - and for good reason. My goal is to get you up and running with the basics and highlight the key differences compared to NgRx.
Yes of course, please can you make a short course on that? so people with 0 redux or ngrx{store, effect} background can understand this completely. i guess this magic can be done in 5 videos :)
Yes, now that this quick start is done I hope to focus on more practical real-world uses of NGXS.
I guess we all will love if you do that, your way of delivering is great, straightforward and neat. And it soothes us as not very beginner but also not an expert developers.
awesome words, that would be great)
Please create more content ngxs related!
This is state management in Angular done right! Great video, great library.
Awesome video, thanks! I deffinetly want to see more of the NGXS.
As someone who works for a living with ngxs, you did an amazing job explaining things
This library is really excellent at reducing the amount of boilerplate. In fact at present you can use it without dispatching actions altogether + there is a ton of other useful features e.g. for entity collections management and much more. Can't believe this is not getting more traction.
Thanks for building this great content and sharing with us!
I've seen NGRX and I gotta agree there was a lot of boilerplate code, thanks for sharing this
I've been using NgRx fot a time, and NgXs looks much-much better and clutter-free. Thanks for this demo :) Also, more about this topic would be nice in the future :)
Looking forward to some advanced NGXS stuff in the future.
I Love your videos, thanks for sharing your knowledge about cool libraries :) Ngrx store was really hard for me to learn and I hated to repeat all this boilerplate stuff. Definitely will try ngxs.
Thank you! State management is difficult in general, but I think NGXS makes good progress at simplifying the implementation.
Great video, I'd like to see more on NGXS. Thanks.
Great video! I'm starting to love ngxs
I got laid off because of covid19 and I'm seeing many more jobs for Angular than for React or Vue. Now I'm getting back to Angular since the last time I did 2.x. Thank you for showing me what's the best state management to use. Your videos are EXCELLENT.
Now, i am seeing more React jobs than Angular. Vue is the least
Man many thanks for touching on this topic
H., awesome, quality video as always. I have been learning NgRx (store and effects) for the past week and I love it. I've just finished refactoring code I wrote for the application I'm making for our office with NgRx (I use Node for the Server and MongoDB for the database). My question is this: should I continue on using NgRx for state management or should I consider refactoring the code again using NgXS? What do you think? Thanks.
Wow, boiler plate is the one thing about ngrx that make me sad. I'm going to take a closer look at this library, looks really cool!
Yeah, that's a huge issue and one main things that impresses me about NGXS. I also place a very high value on readable code.
Great, thanks for the overview!
+Sergey Thanks for watching :)
Thanks for the tutorial.
I have notice that it is common to name the function of the action like the action itself. e.g. SetUsername -> setUsername.
In the ConfirmOrder action you named the function confirm. Is there any special reason or are there some rule you can recommend?
Awesome video thanks for making it!
Thanks for making NGXS, awesome tool!
Austin is the mastermind I just write code :)
excellent! it save me a lot of efforts from ngrx boilerplates
I am a super fan of NGXS give me more Mr. Fireship ❤️🔥
I love it... we want more and more :)
I'm working hard to get more videos out, thanks for watching :)
Amazing content as always! Can you make a video on integrating web workers in an angular app... I've heard that it is possible to load the framework entirely in a separate thread, what are the pros and cons of doing so? And I believe that web workers are going to become more powerful in terms of capabilities in the future.
+Mateja That would make a great video - workers are really important with the rising popularity of PWAs.
you put 'npm -i' at 2:15, it supposed to be 'npm i', is that correct?
Good call, you're right. Thank you.
I have never worked with state management library in angular! What should I learn first ngrx or ngxs?
NGXS is easier to learn if you already know Angular, while NgRx might seem more familiar if you know React/Redux.
would you ever make an angular/firebase video for drag and drop?
If we return direct observable from the action as in the example at the end of the video, would it give us unsubscribe? I use takewhile generally in subscribers, but if we put in the action, maybe a take (1) to stop in the first result? Or in the consuming component of the action we could put takewhile even returning in action a state? I do not know if I was clear ...
Perfect!! more please
Thanks Mel. You can count on more :)
This definitely looks more like Angular code. I'm looking forward to using this in future projects.
Same here :)
Another great video, thanks. Do you think NGXS will continue to grow in popularity now that ngrx-data is able to reduce even more boilerplate code than perhaps even NGXS?
That's a good question, ngrx-data removes boilerplate, but you still need to know how the library works. It's good for prototyping faster for sure. It really comes down to deciding which one you like writing code with
This video is realy amezing!
wow ngxs is pretty awesome
Amazing Content 👍
In the intro u said components can get store data as an observable, but in the further video you mentioned observable returns void. Can you please pitch on this?
Nice video!
What's the extension you are using? The one that shows the charts.
Thanks!
Redux dev tools, checkout the plugin section in the NGXS docs.
I’m a beginner in angular and man this is confusing lol, I need to rewatch this again. My new job uses Ngxs so I need to get good at this asap
Thank you, great video. Is there a public repo for the ngxs version (Salad Project)?
I second this question/request. The video flies through some awesome looking code. It would be odd for the code not to be available via a public repo for reference. Can we get this? Thanks!
Hope Nx will deliver schematics for ngxs in the nearest future
And also add it to angular console
Good Content, Thank you !!
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 ?
Hi. Awesome! How is the NGXS DevTools integration these days?
Hey what a color theme are u using in vs code?
Thanks for the nice video. My query may sound very basic but can you tell me what that graph tool at the right window. Seems very interesting. Thanks!
i need an advice pls, recently i built an app and i made a heavy use of behaviour subjects inside the app to manage the data states and keep everything in sync between different components, this was based on your video about sharing data between components, so i thought that behavior subjects are more versatile than keep using inputs and outputs.
does this have a major side effect on the app performance ?
Both NgRx and NGXS store are just extensions of a BehaviorSubject. That is a very common pattern, but performance depends on many factors. Memory leaks could occur if you're not unsubscribing from data where needed. Run a snapshot recording in chrome to analyze.
Any updates on NgRx vs NGXS?
The Hooks equivalent of the Angular world hasn't kept up in terms of adoption?
Look awesome, thanks a lot
Hello Jeff, first thank you for this tuto, and i wanna ask u about effects and ngxs, in the documentation "( {NgRx}.reducer.ts + {NgRx}.effects.ts ) ≈ {NGXS}.state.ts", so from this code we understand on ngxs the effects pattern are merged with reducers class, but i need some links to explain more about that, can u send me some documentations ?
I keep getting the error: ERROR in node_modules/@ngxs/store/src/of-action.d.ts(1,10): error TS2305: Module '"C:/Projects/ngxsapp/node_modules/rxjs/Rx"' has no exported member 'OperatorFunction'.
Using latest version of @angular/cli and "rxjs": "^5.5.6" according to package.json. Any idea how to fix this? thanks!
Lars Kniep change your rxjs version to 5.6.0-forward-compat.3 in package.json
that worked!, thanks
Is there a repo for this example?
If we have service then why we need ngxs ...can anyone tell most common difference between service and ngxs.Thank u
Awesome video! What is the VS Code Theme and font you are using? It looks fantastic!
atom one dark
Looks great, I've been following ngrx for a while but have been disappointed with the boilerplate and lack of documentation.
The docs for NGXS are awesome
Angular Firebase Been digging into the docs all day. I like the plugin for local storage which will be extremely useful. There was a plan with NGRX to persist data with an indexedDB but they haven't released it.
ngrx is the best implementation of Redux for Angular. Thanks for this new NGXS info. Now days Im mostly working with React Redux, love FP at its best with ES6
Why is ngrx is the best implementation?
can you tell about mocking store and state( specially @Selector()) using karma jasmine.
nice channel, watching each video, thank you)
Awesome, thanks for watching and let me know want you want to see next :)
im interested in new technologies, and on angular) so your content is pretty ok for me)getting lots of knowledge here
Is it the same as Akita?
What's that horizontal tree on right side?
i have not use NgRx before in my angular as i have read medium posts that it gets much complicated to manage code as the app grows .... but i want to try NgXs ... is Redux a Prerequisite to this video ?
No, you don't need to know Redux. It uses a similar pattern, but does it in a way that feels natural for Angular developers.
I agree with you
Hey fireship how long it take to master it
Is this on a repo somewhere? Just wanted to show a nice example of devtools to a colleague
very easy to manange
Is there any strong reason to name payload of action as "payload"?. I think it's more useful to name payload as username, orderid ... etc
I've thought that also, but payload is standard for redux and that's what debuggers expect to see.
thank you. One more question. ngxs dispatch returns observable. So I can omit pending(or loading..) and errorMessage(failure reason) states from state model. also "success", "failure" actions. Or should I keep it?
less boilerplate and easy to learn like vuex. very good
Thank you. Vuex is also awesome.
It was heavily inspired by vuex 😊😊
Can you share your github link for this
Can you make one for akita state management. PLS
What is the `-s` at 2:17
Can we have a database in firestore solely for authentication and have every website I create have a primary firestore instance for storing data and a secondary firestore instance to sign in and still force database/storage rules based on this auth? This blog (given below) talks about it but scopes to just google auth provider and asks me to use server side coding for email/password. Can you make a video on how to do this for email/password authentication?
Blog: firebase.googleblog.com/2016/12/working-with-multiple-firebase-projects-in-an-android-app.html
why its not like vuex
Gracias ♥
Thanks man
What do you think about Akita? Would be super an introduction/comparison between ngrx/ngxs in the future
github.com/datorama/akita
My fav.
Positive for state management on the angular end.
Just like mobx for angular
Yes, definitely some similarities.
Redux design pattern :)
More ngxs
Thanks for great video however for me who knows NGRX this looks more complicated.
Both libraries are excellent. If you already use NgRx and enjoy the dev experience, then I would stick with that.
agree, feel complicated after being familiar with ngrx. Will give it a try anyway :)
this video went by way too fast imo. is there an article where I could follow this at my own pace?
Use video speed playback modifier
im late to the party, thanks for the video
It is too early to introduce yet another libray for the Angular State Management. The people should learn NgRx the "offficial" Angular State Management Library. Later the fan of Decorators can switch to NGXS.
NGXS has some nice parts but it is even a step further to make to learn the library.
NgRx has more boilerplate, but it is easier to mentally follow it because it has less hidden ("magic"??) parts!
That's a fair argument, but I would say NGXS is easier to learn if brand new state management. I'm not advocating one or the other, but was especially impressed with this library, hence the video.
There is no official state management library for Angular.
I think it would be fair to support the NgRx People for their initial work on Angular State Management.
I read "Anger State Management" for some reason lol
XD rxjs for life
Tell me something, what’s so wrong my with holding on to state in angular services in simple variables. Then have your components simply bind to that data. Whenever data changes (pulling, listening, web sockets, … etc), simply update your state variables in your services. Why have all this “management”?!
Is this still legit in 2021?
same question... there's been a lot of progress in ngrx to reduce the boilerplate needed, so this video is kind of out of date now, although it's still pretty cool!
I work with angular 4 years every day, i still dont understand the point or benefit of this
neither do I but a lot of jobs require it.. I start next week prob. a job with ngxs.. so I have to learn it.. been using regular angular for the last 2 years just fine.
I really don't like it when you copy paste code. Its better to have 1 1hr video than an 11min video that most users won't understand. Assume a beginner's mindset. Just saying :)