Angular NgRx - How to use Feature Creator (API Overview, 2023)
Vložit
- čas přidán 27. 07. 2024
- Level up your Angular skills with my advanced courses 🚀
bit.ly/advanced-angular-courses
Angular NgRx library is the most popular state management library for Angular and in this video, I will cover one of its functions called createFeature. At the end of the video, you will learn how by using the createFeature function you can reduce the amount of boilerplate in your Angular application. It becomes possible because createFeature can generate a bunch of initial NgRx selectors at runtime, so you don't have to do it manually. This video was created in close collaboration with the NgRx core team. I hope you will like the video and learn a lot from this tutorial.
🔗 createFeature official documentation:
ngrx.io/guide/store/feature-c...
🔗 Lesson Source Code (initial state in "main" branch):
github.com/DMezhenskyi/ngrx-p...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
🕒 Time Codes:
00:00:00 - Intro;
00:00:25 - Feature Creator Overview;
00:11:28 - Outro;
#angular #ngrx - Věda a technologie
Level up your Angular skills with my advanced courses 🚀
bit.ly/advanced-angular-courses
Your tutorial has added to the official documentation😯Good job!)
Thanks a lot! Didn't know about 'feature creator'. Would be nice if you can talk about how to structure an applicantion with multiple NgRx stores (and which are the best practices)
Definitely want more 😀It would be really helpful if you make a video about ngrx component-store vs ngrx global-store - when to use which one, how to combine this two solutions, should I use both in one project etc.
Hi :) Thank you for the suggestion. Indeed it is an interesting topic
Good idea
ngRx Series would be good as well, I don't find any worth explanation about ngRx in the internet like you.
@@DecodedFrontend so are you planning to do a video on this anytime in the future..?
Great video! Thanks!
I'm so grateful for your videos. You've definitely helped clarify some of the API I was curious about.
Thank you! Great content as always. I use NgRx feature creators in my new project, so it was pretty useful to know that it's capable of.
AWESOME!! i know about createFeatureSelector but dint know about createFeature. Thank!
Excellent explanation!!
Great video useful for internal banking applications where there are a ton of fields to juggle around
Thank you Dmitry, for your dedication and passion for web development and Angular in particular. It is a pleasure to watch your videos!
Thanks for another useful video, Dmytro
super trick thank you SO much !!!
More NgRx tricks please!
Just thanks you !
Great video. Was unaware of this. Our front end stack is full of repeated selectors. Going to try this out.
NGRX store is one of my favorite libs of all time.
NgRx team did indeed a great work!
Thanks. I am using provideStore(reducers) but not using provideState, it is still working.
Another Great Video!!
Thanks, Adrian. Glad you enjoyed it!
@@DecodedFrontend Have you thought about creating a testing series?? :D
We need a ngrx course 🔥
Incredible, I have some projects with big states, lots of parameters and a huge .selectors file. I will refactor
Greate
I love this channel! If possible, can you do a deep dive into how animations actually work under the hood? Thanks!
Thanks for the suggestion. It can be :)
Great Video as always.... ngrx data and component store are simpler form me
Great job 👍. Is it support other state selectors as parameters in extraSelectors?
nice, but you may use the selectot to file to declare custom selectors and later import them to createfeatures and it looks cleaner
Cool stuff. Thanks a lot for your explanation, but how about tree shaking? You include all stuff like - import {blabla} from 'blabla', but you can use not all of it.
Дякую, земляк!)
Hi Dmytro, what do you think about ngneat/elf state management library? Would you use it personally or in enterprise level apps? At first glance it seems very promising given the features it has
It is really a great content and of course i'd love to see more of it.
But i've recently came across a new method in ngrx called selectSignal, so a question came up in my mind..
Does this feature support dealing with signal based state or not,
also i wonder if the ngrx will depend more on signals in the future!
Great video, but how you set multiple features in the provideState()?
Thanks for that. Please let us know how PWA should be created with GraphQL and if there any issues that can arise?
How do you mock these selectors for components unit tests? Is it still a valid case to use mockStore.oveerideSelector() method?
Hi sir.. is it not possible to use it like redux toolkit?
Could please make a playlist for ngrx with signal?🎉
sometimes we need to pass values to our selectors like this: const selectFoobar = ( foo: string ) => createSelector(...)
Is this something you would avoid doing anyway or would this still be possible (if it would, how?)
Can we have multiple createFeature() in root state? How to achieve that?
Can you make a video on nx monorepo?
+1
Note:
1. when we are working on a library, there could be name collisions, for example we are using loading flag in StateA and in StateB too. In this case we have to rename it to loadingStateA or smtg.
2. in unit testing point of view, it can spare some tests, I wonder how the coverage report looks like if I test only 1 selector from extraSelectors block, I mean it will be 100% or not -> I will figure out today 😅
3. thanks for the video Dmytro 🙂
Hi from California! Slava Ukraini!
Heroyam Slava ❤️
I'm writing Angular for 3 years. I worked on lots of projects, and I still don't understand what does NGRX solve? Angular has state management with the services already. You can define your services in any scope, and do exactly what these libraries do. This way it looks like too much React imo.
I can agree with you. I worked with ngrx and service base approach in a quite big application.. and it was enough to deliver the features. So it is still a question for me as well
@@user-if1de8pt2j IDK much about the NgXS. The problem is creating simple services for state management is generally simpler than lots of library boilerplate. You can create generic state services to avoiding create similar services. In my case, I do not reset the state manually, the state service will be destroyed with the component already.
I stopped using ngrx in 2019, because of the huge amount of boilerplate code. Now I can see 4 years later they're still fighting against it :))
@@user-if1de8pt2j yep. I found that any other store implementations are much better than this "industry standard". For my projects I prefer elf now. Very simple and super extensible.
*promosm*
createActionGroup() також зручний тул для групування actions. Дозволяє уникнути певної к-сті бойлерплейту
Також цікаво було б подивитись відео про @ngrx/entity, @ngrx/data
Дякую за контент! Слава Україні!
Героям Слава!🇺🇦 Дякую, за коментар. Так, згоден з приводу action groups
Great video thanks for sharing, can I ask why you exported the scientistFeature from the scientist.reducer.ts file and not from the scientist.selectors.ts?