I've worked with React in the past and needed a crash course in Angular for a client. All of your course have been immensely helpful. Thank you so much, Gary!
You simply have blown by mind, this tutorial is simply more than AWESOME! SUPER AWESOME. In a nutshell, I ran helter-skelter from one website to another to get the hang of NgRX but in vain, then I bumped into this tutorial which NOT ONLY cleared up my all doubts surrounding this topic BUT ALSO gave me a SOLID foundation to this topic. Thanks a TON buddy!
I am new to it NGRX. I am following this tutorial but getting this error. I tried a lot but getting this error, can anyone plz help to fix the issue. Kindly help. Thanks in advance. Type '(state: Tutorial[] | undefined, action: Actions) => Tutorial[]' is not assignable to type 'ActionReducer'. Types of parameters 'action' and 'action' are incompatible. Type 'Action' is not assignable to type 'Actions'. Property 'payload' is missing in type 'Action' but required in type 'RemoveTutorial'. 22 tutorial: reducer ~~~~~~~~ src/app/actions/tutorial.actions.ts:20:17 20 constructor(public payload: Tutorial) { } ~~~~~~~~~~~~~~~~~~~~~~~~ 'payload' is declared here.
As someone who rarely comments I found your appeal to leave a comment to be compelling in that you did not care even if it was bad. Your videos are incredibly rapid fire and informative. I think that those who complain they aren't masters of the content you're purveying at the end of the video aren't being realistic. I often find that I've gone for 5% mastery to 30% by the end of any given video of yours. With further mastery being harder and harder to attain of course its still an excellent jump off point into leveraging these technologies in one of my projects.
Excellent tutorial, especially for beginners. All the fundamental concepts are explained and shown so nicely. An additional perk, the coursetro website where everything is written and described clearly. It can't get any easier. Thanks, Simon for bringing out this tutorial.
For those of you going through this tutorial and you get to the part where he's putting the reducer into the app.module.ts and you get an error. Try this, it works for me. StoreModule.forRoot({ product: reducer } as ActionReducerMap)
Hi Gary, This is really quick and simple starting for NgRx. Thanks for keeping it so simple and clean. It really helped me to understand basic concepts.
I find it amazing that everyone is ripping apart the way he does things in this video. it was TWO years ago and TEN versions ago. come on people things were way different back then.
Simon wants comments: before showing the code i would suggest to mention conepts like 'one way data flow'.... next video: as you mentioned: NgRx Effects (handle side effects) next video then: NgRx Enitities: help us with useful functions for CRUD operations next video then: NgRx Schematics (remove the writing of the boilerplate code) Thank's Simon and keep on!
I've watched several of your Angular tutorials over the last few days. You do a great job and I really appreciate you doing them. One suggestion.. it would be helpful if you picked real world scenarios to model with your tutorials. Call an object "Users" instead of "tutorial". Perhaps you could pick a consistent scenario (ex. Car Sales Company, etc) that you apply to all of your tutorials so people watching over time would get to learn how each technology would fit into the overall design puzzle.
paced at perfect speed (narration), clear (simple), concise (short), to the point (no extra staff that isn't related or helps). This topic until not having gotten a grasp on it, can be difficult to conceptually understand, but you were able to make it normal! 2020 suppose to be the year of Ngrx in Angular(at least that was said in the ngrx conference 2020), so maybe it just needs to be upgraded as to the part when you install @ngrx/store into the app: app.module.ts -> imports -> StoreModule.forRoot(reducers, {.... which is an upgraded part when installing @ngrx/store
Best wishes for a happy holiday season. I appreciate your courses and appreciate your style. I like that we can follow the written version. Helped at the office for training and code samples/repository help, along with your knowledge and tutorial style 👌. Will contribute here during this holiday season 2020 so you can get a few six packs. Good work...thank you for sharing your knowledge here!
Thx a lot Gary, U'r videos are great and the quality is excellent, also the Observer one was very good. U'r in my opinion among the 5 best on UA-cam today.
Nice tutorial! Only thing I would do is make the REMOVE reducer actually immutable with this : const newState = [...state.slice(0, action.payload), ...state.slice(action.payload + 1)];
@@itayperry8852 Too bad spread operator is not viable for that. It creates a shallow copy, so any nested objects inside actually still refer to the same object in memory.
one quick tip : the spread operator works only if your object is one level deep, for example z = {name: John, value: 10}. If your object has objects inside of it instead of primitive data it leads to weird behaviours. Use lodash deep copy instead
Splice function is not working in the current angular/javascript version. I used the following and it worked fine: state = state.filter((el, index) => index != action.payload);
It's a good read and it was helpful to me (particularly because I have some level of experience in Redux). But I'm more concerned about a beginner who doesn't know what state management is and how to work around state management.
Great video for beginners as well. Definitely help me understand the actions and reducers concept and how to dispatch an event to the store. Thanks a lot
I have nothing to say but I'm leaving a comment because you deserve at least it... Diffidently suggesting your channel to all my friends in the field...
Honestly you just wrote some code that works but didn't really explain anything. I've followed both the video and the written tutorial and still have no ideia how this code works.
Nice work!. I hope you explained more about the use case of this in real world versus database and also one of the variable has ... (3 dots). Not sure what that was. BTW, your voice is so good to hear
So, after doing Vuex with vue js and redux on react native, I was able to quickly wrap my head around this, then earlier last year I came here for ngrx. Vue js things much more easier, i guess. And nice explanation as well.
Hi Gary, is there going to be a part 2 to this tutorial with @effects? Even the most basic tutorials don't make as much sense as yours. Thanks for all that you do!
Amazing stuff. This would be a little harder for someone without any angular experience but for one that has a little, least how to spin up a small app while accessing services directly in components, this is a good way to start the ng-store road. Also, anyone with react-redux experience can relate quite fast. I couldn't find the effects tutorial though.
As always great job. But what if: 1. A component displays within a *ngFor a list of objects - let's call this app-list 2. A sibling component displays the detail of the selected object - let's call this app-detail 3. The object may be edited from any of the components 4. How to work in O(1) when editing the object on app-detail and reflecting on app-list. Known problems: 1. We cannot save the object index from the app-list because the list can be filtered at any moment. How handle this case?
Thanks for this course man... I'm looking forward to get a course on deep dive into ngrx effects and combined reducers and so on .. as always.. awesome
Thanks for the vid! Small query being, @26.36, the state was directly mutated i guess. A spread operator with a filter on the index would have been the way to remove the item from array.
Hi, I am getting the bellow error while fetching the data in ReadComponet. this.tutorials = store.select('tutorial'); No overload matches this call. Overload 1 of 9, '(mapFn: (state: AppState) => Tutorial[]): Observable', gave the following error. Argument of type '"tutorial"' is not assignable to parameter of type '(state: AppState) => Tutorial[]'. Overload 2 of 9, '(key: "tutorials"): Observable', gave the following error. Argument of type '"tutorial"' is not assignable to parameter of type '"tutorials"'.ts(2769) Please help me how to resolve. Thanks in advance
Simple and straight forward to get the "gist" of ngrx/store. Quick question though, none of your typescript lines are terminated with ";" and my VS Code IDE complains. How do you set up your editor to handle that?
I tried to implement ngrx/Store with Angular but I am always getting the following error in console, and no content is showed: "TypeError: Cannot read property 'schedule' of undefined at ObserveOnSubscriber.scheduleMessage" By the way I am using: Angular CLI: 1.7.4 Angular: 5.2.11 Please I need urgent help since I am stack into this issue..
your tutorial is a bit different with angular doc's tutorial. On angular doc, it has file called selector. Can you explain what it's role and why your tutorial don't have it?
It is a good practice put a '$' symbol at end of an observable variable to fast identification as Observable type. Following this way: tutorials$: Observable;
I've worked with React in the past and needed a crash course in Angular for a client. All of your course have been immensely helpful. Thank you so much, Gary!
You simply have blown by mind, this tutorial is simply more than AWESOME! SUPER AWESOME.
In a nutshell, I ran helter-skelter from one website to another to get the hang of NgRX but in vain, then I bumped into this tutorial which NOT ONLY cleared up my all doubts surrounding this topic BUT ALSO gave me a SOLID foundation to this topic. Thanks a TON buddy!
Hey mr. Simon , don't ever see bed comments. You are now my binoculars for wide Angular World. Awesome movies , so clear and laconic. THANK YOU !!!
The way of explanation is very super. I learned Ngrx store in just few minutes. Thank you so much. Keep posting new videos man
I am new to it NGRX. I am following this tutorial but getting this error. I tried a lot but getting this error, can anyone plz help to fix the issue. Kindly help. Thanks in advance.
Type '(state: Tutorial[] | undefined, action: Actions) => Tutorial[]' is not assignable to type 'ActionReducer'.
Types of parameters 'action' and 'action' are incompatible.
Type 'Action' is not assignable to type 'Actions'.
Property 'payload' is missing in type 'Action' but required in type 'RemoveTutorial'.
22 tutorial: reducer
~~~~~~~~
src/app/actions/tutorial.actions.ts:20:17
20 constructor(public payload: Tutorial) { }
~~~~~~~~~~~~~~~~~~~~~~~~
'payload' is declared here.
did u get the solution? even i am stuck at same error
Please mention if you got it resolved
I have the same error, sigh.
As someone who rarely comments I found your appeal to leave a comment to be compelling in that you did not care even if it was bad. Your videos are incredibly rapid fire and informative. I think that those who complain they aren't masters of the content you're purveying at the end of the video aren't being realistic. I often find that I've gone for 5% mastery to 30% by the end of any given video of yours. With further mastery being harder and harder to attain of course its still an excellent jump off point into leveraging these technologies in one of my projects.
Use filter instead of splice method in reducer to remove a tutorial to keep the old state immutable
in this case their tutorial model must have an id property for comparison
@@mquanit You can use the iteration index for comparison. Ex: state = state.filter((el, index) => index != action.payload);
exactly! he didn't even uphold the design patterns of flux architecture, the state is read-only.
Excellent tutorial, especially for beginners. All the fundamental concepts are explained and shown so nicely. An additional perk, the coursetro website where everything is written and described clearly. It can't get any easier. Thanks, Simon for bringing out this tutorial.
Nice to have a good tutorial, that manually shows step by step how NgRx store works. Good job!
For those of you going through this tutorial and you get to the part where he's putting the reducer into the app.module.ts and you get an error. Try this, it works for me.
StoreModule.forRoot({
product: reducer
} as ActionReducerMap)
thank you so much!
Great tutorial really explained well. I've watched multiple tutorials and this was the easiest to follow
Hi Gary,
This is really quick and simple starting for NgRx. Thanks for keeping it so simple and clean.
It really helped me to understand basic concepts.
In your tutorial, You haven't explained where exactly this store will be stored. & what is the max limit etc.
I find it amazing that everyone is ripping apart the way he does things in this video. it was TWO years ago and TEN versions ago. come on people things were way different back then.
Simon wants comments:
before showing the code i would suggest to mention conepts like 'one way data flow'....
next video: as you mentioned: NgRx Effects (handle side effects)
next video then: NgRx Enitities: help us with useful functions for CRUD operations
next video then: NgRx Schematics (remove the writing of the boilerplate code)
Thank's Simon and keep on!
This is simply the best and easy explanation of ngrx store. Thanks Gary.
Whatever I want to learn new thing in Frontend I always look for your most effective tutorials, Thank you very much
This tutorial is very clear and to the point. Loving it.
I used to use Vue and React to build web and SPA. now I am learning angular6, rxjs from your video courses. thanks a lot.
I've watched several of your Angular tutorials over the last few days. You do a great job and I really appreciate you doing them. One suggestion.. it would be helpful if you picked real world scenarios to model with your tutorials. Call an object "Users" instead of "tutorial". Perhaps you could pick a consistent scenario (ex. Car Sales Company, etc) that you apply to all of your tutorials so people watching over time would get to learn how each technology would fit into the overall design puzzle.
A tutorial is a real world model
followed your video, then looked at written version. And makes sense now. Greetings. Thanks.
paced at perfect speed (narration), clear (simple), concise (short), to the point (no extra staff that isn't related or helps). This topic until not having gotten a grasp on it, can be difficult to conceptually understand, but you were able to make it normal! 2020 suppose to be the year of Ngrx in Angular(at least that was said in the ngrx conference 2020), so maybe it just needs to be upgraded as to the part when you install @ngrx/store into the app: app.module.ts -> imports -> StoreModule.forRoot(reducers, {.... which is an upgraded part when installing @ngrx/store
Very useful. Was able to connect pieces. This was 3rd tutorial I watched on ngRx.
what an excellent display of greatness mr gary simon.
gary simon is one of my best instructure.
You are making the best Angular tutorials I know! Keep it up!
Best wishes for a happy holiday season. I appreciate your courses and appreciate your style. I like that we can follow the written version. Helped at the office for training and code samples/repository help, along with your knowledge and tutorial style 👌. Will contribute here during this holiday season 2020 so you can get a few six packs. Good work...thank you for sharing your knowledge here!
Thx a lot Gary, U'r videos are great and the quality is excellent, also the Observer one was very good. U'r in my opinion among the 5 best on UA-cam today.
Nice tutorial! Only thing I would do is make the REMOVE reducer actually immutable with this : const newState = [...state.slice(0, action.payload), ...state.slice(action.payload + 1)];
Indeed! A reducer function must be pure :)
@@itayperry8852 Too bad spread operator is not viable for that. It creates a shallow copy, so any nested objects inside actually still refer to the same object in memory.
Fantastic for the intermediate developers. Very concise and compact. Appreciate it.
Excellent material, really nice delivery. Highly recommended!
This was easy to follow and explained very well, what an excellent Angular tutorial!
Thanks a lot, this tutorial helped me in solving a problem I was facing for 2 days. Great stuff, I am grateful.
one quick tip : the spread operator works only if your object is one level deep, for example z = {name: John, value: 10}. If your object has objects inside of it instead of primitive data it leads to weird behaviours. Use lodash deep copy instead
Splice function is not working in the current angular/javascript version. I used the following and it worked fine: state = state.filter((el, index) => index != action.payload);
so clear so basic, this is what i was looking for, Thanks a million!
You made it look so easy Gary.Thanks!!
Good tutorial for beginner to understand the concept. Thanks for the tutorial
ultimate, best tutorial for angular with redux
Would also love to see effects and feature selector here.
One of the best state management videos I have come across. Loved the way you explained.
It's a good read and it was helpful to me (particularly because I have some level of experience in Redux). But I'm more concerned about a beginner who doesn't know what state management is and how to work around state management.
Great video for beginners as well. Definitely help me understand the actions and reducers concept and how to dispatch an event to the store. Thanks a lot
He is right, not enough people comment on the videos.
I have nothing to say but I'm leaving a comment because you deserve at least it...
Diffidently suggesting your channel to all my friends in the field...
Good color theme , background music ..good teacher
Nice tutorial with nice example. It's clean and simple. Thank you very much.
Watching for while now, your videos are very good... I even subscribed to your blog Coursetro... Keep up the good work!!!
Appreciate it, simple and short as always
Honestly you just wrote some code that works but didn't really explain anything. I've followed both the video and the written tutorial and still have no ideia how this code works.
+1
+1
+1
+1
Nice work!. I hope you explained more about the use case of this in real world versus database and also one of the variable has ... (3 dots). Not sure what that was. BTW, your voice is so good to hear
the 3 dots is called a spread operator developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
Gary your explanations are awesome. I have learnt a lot. Thumbs up bro.
Awesome video Gary ! not sure if you have covered a video effects along with actions and reducers. If yes please share details.
Thanks for taking the time to make the video and sharing your knowledge! Much appreciated
So, after doing Vuex with vue js and redux on react native, I was able to quickly wrap my head around this, then earlier last year I came here for ngrx. Vue js things much more easier, i guess. And nice explanation as well.
Hi Gary, is there going to be a part 2 to this tutorial with @effects? Even the most basic tutorials don't make as much sense as yours. Thanks for all that you do!
Thanks got a good into to ngrx to start working on it .... pls continue the good work...
Can you please explain why you have used square brackets while initializing the const ADD_TUTORIAL
Your tutorials really helped me learn Angular. started a month ago and its really going well. Thanks!
Your tutorial make complicated things very simple thanks a lot 👍
Amazing stuff. This would be a little harder for someone without any angular experience but for one that has a little, least how to spin up a small app while accessing services directly in components, this is a good way to start the ng-store road. Also, anyone with react-redux experience can relate quite fast. I couldn't find the effects tutorial though.
Good tutorial, gives basic knowledge on NgRx implementation... thumbs up
As always great job. But what if:
1. A component displays within a *ngFor a list of objects - let's call this app-list
2. A sibling component displays the detail of the selected object - let's call this app-detail
3. The object may be edited from any of the components
4. How to work in O(1) when editing the object on app-detail and reflecting on app-list.
Known problems:
1. We cannot save the object index from the app-list because the list can be filtered at any moment.
How handle this case?
Excellent course as always!
Really helpful explaining how reducers and stores work. Thanks!
your tutorials and step-by-step demo project creations are very helpful and awesome. :)
Thanks for this course man... I'm looking forward to get a course on deep dive into ngrx effects and combined reducers and so on .. as always.. awesome
You are just awesome bro... you have made it so simple to understand...Thank you..
Thanks for the vid! Small query being, @26.36, the state was directly mutated i guess. A spread operator with a filter on the index would have been the way to remove the item from array.
Solid content, superb pacing, easy to follow.
it was an awesome tutorial for basic intro to ng-rx and store, thanks a lot ,great work !
Hi,
I am getting the bellow error while fetching the data in ReadComponet.
this.tutorials = store.select('tutorial');
No overload matches this call.
Overload 1 of 9, '(mapFn: (state: AppState) => Tutorial[]): Observable', gave the following error.
Argument of type '"tutorial"' is not assignable to parameter of type '(state: AppState) => Tutorial[]'.
Overload 2 of 9, '(key: "tutorials"): Observable', gave the following error.
Argument of type '"tutorial"' is not assignable to parameter of type '"tutorials"'.ts(2769)
Please help me how to resolve.
Thanks in advance
great beginners tutorial for ngrx. is there a tuturial for initializing the initial state of the model from backend? would be great .
Is state get cleared on browser refresh?
Million Thanks man. Love your videos. Please Never Stop lol.
Its a great video to understand basics of Ngrx Store
What if we have select box? How to get and show value from select box? Thank you!
Why at 12:12 is 'initialState' in square brackets?
on 18:30 you are defining const tutorial in a constructor of a component ? I just did not see this practice anywhere, why not on ngOnInit ?
Awesome! Thank you. But no effects video yet?
im starting to get the sense out of NGRX. thank @Gary
i keep on getting this error - 'types of parameters 'action' and 'action' are incompatible.'' donno what to do
Simple and straight forward to get the "gist" of ngrx/store. Quick question though, none of your typescript lines are terminated with ";" and my VS Code IDE complains. How do you set up your editor to handle that?
Please make video on how to add 2fa in angular project
This tutorial help me to understand the ngrx concept. Really good video.
You are the last one to be called terrible !
I tried to implement ngrx/Store with Angular but I am always getting the following error in console, and no content is showed:
"TypeError: Cannot read property 'schedule' of undefined at ObserveOnSubscriber.scheduleMessage"
By the way I am using: Angular CLI: 1.7.4 Angular: 5.2.11
Please I need urgent help since I am stack into this issue..
your tutorial is a bit different with angular doc's tutorial. On angular doc, it has file called selector. Can you explain what it's role and why your tutorial don't have it?
Where would you put the db and logic interaction? In the component, reducer or actions?
It is a good practice put a '$' symbol at end of an observable variable to fast identification as Observable type. Following this way: tutorials$: Observable;
Can I get video for ngrx-store-localstorage, and its flow of working
This is an excellent video - Gary..... Thanks for your time.
what will happen on refreshing the page? Does it reset the data or retrieve the existing data?
Nice intro to NgRx for beginners. Thanks!
Thank you! Nice and well explained.
single shot learning curve...Can you provide video on entities and effects?
wow this was great and straight to the point. Thank you
Excellent. i m very poorer student. and i m getting more information from you what i need for my really time project. keep it up.
You are absolutely great
Thanks for the course, you teach very well!!
This is a great video, I like how you leave it simple. It would be nice to show effects, sagas, selectors though
So every reducer function your app uses needs to be imported in the root component? Doesn't sounds like it scales very well.