Guys just slow down the video and follow along with him. Yes the video is a bit fast. But if you just slow down the video and follow his steps its pretty easy to understand. I have gone through many videos and this was the one which actually helped me understand the logic. Thanks a lot!!!!
I find that surprising. The first 80 seconds made the concept so clear, everything suddenly started to make sense. Especially after watching a different video earlier that lacked the whole conceptual explanation.
You are not stupid. Everything takes time and prior knowledge to learn. Any prior experience working with Redux, MobX, or Vuex helps to understand ngrx. However, you can skip those and just learn all about ngrx from different sources. Time. Don't give up.
No, you're definitely not alone who had the same experience - I had to loop through the first few minutes a couple of times too. But once the core concepts clicked, the rest of the video was no problem.
People complaining about too fast explaination. Please go through docs of ngrx first (basics). Then watch this, you'll then understand value of this video.
@@ssonarikar shouldn't have to, this guy needs to learn to slow down. if you were to try what he does, he switches from file to file so fast its impossible to keep up without pausing.
Sorry to hear that. Most of my content is geared towards intermediate-advanced developers, but I will be releasing a beginner tutorial that you can follow step-by-step in a few days.
it takes watching many of these videos to understand redux. Try watching the egghead.io Dan Abramov redux video course, it's free. That will teach the redux pattern. Then come back to this one when you need to make it work with ngrx/store.
OK, I didn't understand anything the first time I watched this a few hours ago, but then I watched another video that explained it better, and this was a useful quick summary. I'll probably come back to re-watch this, as a refresher, but it's not very good to learn the concept initially.
If you're watching in 2021, make sure you import your "FormsModule" to have access to [(ngModel)] . Meanwhile, i'm battling with the console error ............................. Types of parameters 'action' and 'action' are incompatible. Type 'Action' is not assignable to type 'All'. Type 'Action' is not assignable to type 'Reset'. Types of property 'type' are incompatible. Type 'string' is not assignable to type '"[Post] Reset"'. 25 post: postReducer
Anyone watching this tutorial in 2023. Some syntax has changed for ngrx, like there is a dedicated method called createAction() to create actions and something called for payload of an action. For the concept though, this tutorial is still one of the best
This was done in 2017, so it is a bit outdated now. First part is ok, but the second part will not compile and it seems that the recommended way of doing things has changed in the meanwhile.
great tutorial for someone who already knows something about redux and wants to use it in angular. If you want to understand from 0, search for a largest tutorial where explains what is an action, reducer, effect, etc.
It's important to realize that actions are events, not "ways to change state" or things that are "trying to change state." They represent what happened only. Reducers own the responsibility to decide how its state should change.
I just wanted to say that I liked your video, I'm experienced with React+Redux and I have to maintain Angular application now. I head abour ngrx and this video is perfect for me to know how it works. In 9 minutes! It's great, thanks for the vid, it's just not for beginners.
great video, i need to make some observable value that will be subscribed by multiple child component at different time so i thought that ngrx maybe a best solution instead of using static observable for it and after watching this video it clear to me that ngrx is the best solution that i can use.
Question: State in Redux is immutable object. So why you mutate the state in simpleReducer function? I mean the follow code: return state = 'Hola Mundo', in video it is in 2:30
One thing that I dont get is, if the porpouse is to have a single object for all the state in the app, why all examples out there always add multiple reducers to the store, I mean, every reducer has it's own payload, and the state managed in this reducers is strong typed. I just dont get how all of this can be a SINGLE object. In the project you build on this video, you have the postReducer and the messageReducer - how handling the postReducer and retuning a state of type POST does not overwrite that MESSAGE part of the store object?
I found this tutorial very insightful and I really got a lot of information from it. Some complain that it was "too fast" but I disagree. I did end up pausing it and would jot down notes then replay it again. It's fast because it's very high level.
If anyone gets an issue in their app config after following the second example try removing the readonly keyword from the type parameter of your actions. I assume that something changed since the video was made.
Men, your lessons are one the best on the internet. Thank you so much! Good structure, concise and clean. Thinking about to buy your book. What are the benefits of doing so? Do you have a paper version?
Perfect for me! congratulations. I've developed js until 5 year ago. Now deeping into the new frontend approach de on a new job. It's time to study in detail the framework docs in deep and apply it to my job.This kind of material it's the thing that I am looking for, everytime I need to update my experience. Thank you!
I'm still learning but whats the difference between setting a singleton service compared to using ngrx store? Doesn't the singleton service contain a state throughout the application or am I wrong?
I wasn't really sure what Redux would accomplish in Angular that couldn't be done with Injectables/Services and ReplaySubjects with seemingly the same amount of effort, but I guess there's that nifty debugging tool that makes it all worth it? As the video says that tool is the most important feature of Redux.
Stay tuned. I am releasing another video tomorrow about ngrx/effects that will refactor this function with the spread syntax. I wanted to include Object.assign in this video because is easier to understand IMO.
Let say I use Redux to keep track of changes on my entities being displayed on a index, a list for a CRUD. So every time the user creates/deletes/updates one single entity, I have to dispatch an action to update my entities store. That in turn will make another copy of my entities (my state), that mean that if I have 30 items on the list, every state change will spawn another array with 30 items or so in it. After a while if the user keep making CRUD operations, won't my app end up bloated and slow?
Thanks a lot!. There is ng2-redux too, which performs more or less the same thing as mentioned in the video. The video was quite helpful though. And it would be damn quite helpful as you can just introduce one concept at a time just as you have shown here coz ngrx as a whole, and the usual conf talks about that in youtube , most times just goes over the head and doesnt help. This video was about the intro, and as you told, the next will be for the side effects, then about animations etc, and if there is a bit more realistic examples, that wud do no harm either.! One question - If you keep adding the individual reducers inside the import section, eventually the app.module gets bloated. Do we have a combineReducers kind of thing, where we just import that thing in app.module and the rest of the additions happen in that reducer file? Am sure we can do that. I love this channel!..you rock.
+Harikrishnan Thank you for the feedback! It is possible to combine reducers, but there's a pull request in ngrx currently for a utility method that will handle this exact problem, so maybe we will see that in the future.
Hi Angular Firebase, This is really a best tutorial when practiced. I have post modules and gallery modules where I need the upvotes and downvotes. Do I create the upvote and the downvote as a shared reducer or each module should have duplicated upvotes and downvote again?
I tried to run this example without using a template variable but dot notation instead and it would not work, I just kept getting [Object object] - why do I need a template variable here? I also cant find any info on them in the Angular docs :(
Hey thanks for the reply...not trying to show the entire object but I thought I could do something like {{ object.property }} but this doesn't seem to work unless I set the object to a template variable e.g. "object as o" and then I can do {{ o.property }}. I wanted to know using the "as" keyword is required for using an object in the {{}}. Im coming from AngularJS and trying to learn Angular
Great tutorial, quick and too the point. Not every tutorial has to be a 5 hour video. Question though as I think ngrx changed (which is seems to often do which is unfortunate) - the setting of 'return newState(state, { text: action.payload })' . the action.payload has been removed from Action
@Angular Firebase - Content and Videos are too good ! Thanks for all you efforts !! Appreciate !!! But i have observed its pretty fast so every-time i have to stop and rewind 2-3 times to understand and code. Also can you please come with complete series of videos on particular topic from start to end / Beginners to Advanced level - TESTING with JASMIN KARMA, RXJS, NGRX, OBSERVABLES etc Please keep developing the great content at less speed / slow pace. Thanks
I don't like overheat solutions, BehaviourSubject is nice and clear. Maybe i am wrong but if you do this on massive project you will have massive problem i think because only small group of people can make changes in available time. But great tutorial !D Thanks a lot again :).
I've always enjoyed your videos and have found them very helpful. I've studied state management techniques and libraries for months. NgRx, Ngxs, Akita, to name a few. And to be honest, this is by far the best introduction I've seen or read on NgRx, cheers. Maybe it's just me, but I like your style, my kinda tutorials. Fabulous 🐉🎠
Facebook initially messed up the implementation on MVC pattern in their code. They fixed it up applied memento pattern and called it Flux. So Flux=MVC+Memento+Observer.
I got to 7 minutes and then gave up, some of your later code edits have code missing from previous edits or the cloned code is different to the screenshot versions - very confusing? Look at all the times you edit the app.component.ts file and you'll see what I'm referring to, refer to the cloned version as a start point.
thank you for ur response. i appreciate that. I'm confused because i wonder isn't just making service with replay/behaviour subject etc. enough to share data between components services and so on?
Dude, something is off with the results in the first part. The value is always one step behind. When you clicked on Spanish, it was still Hello World. Then when you clicked on French, it said Hola...it seems like there needs to be an extra click, so the data is not being updated properly.
Build at: 2022-08-25T17:52:07.576Z - Hash: e1c559633d060888 - Time: 788ms Error: src/app/app.module.ts:34:56 - error TS2322: Type '(state: Post | undefined, action: All) => any' is not assignable to type 'ActionReducer'. Types of parameters 'action' and 'action' are incompatible. Type 'Action' is not assignable to type 'All'. Property 'payload' is missing in type 'Action' but required in type 'EditText'. 34 StoreModule.forRoot({ arrayPokemon: simpleReducer, post: postReducer }) ~~~~ src/app/actions/post.actions.ts:11:17 11 constructor(public payload: string) { } ~~~~~~~~~~~~~~~~~~~~~~ 'payload' is declared here.
NgRx: How to make simple things complicated
That's not just Ngrx, that's Redux and React b*llsh*t way
And complicated things less complicated
Guys just slow down the video and follow along with him. Yes the video is a bit fast. But if you just slow down the video and follow his steps its pretty easy to understand. I have gone through many videos and this was the one which actually helped me understand the logic. Thanks a lot!!!!
Great tutorial. But its for super-humans with the lightning speed.
set playback speed to 0.75 and watch..... intermittently go back and forth to relate current code that he is writing
😂😂😂😂 so fuking true
I don't know if I'm just stupid, but I didn't understand anything with you explaining this way.
I highly doubt you're stupid my friend. Do you have experience with reactive programming?
I find that surprising. The first 80 seconds made the concept so clear, everything suddenly started to make sense. Especially after watching a different video earlier that lacked the whole conceptual explanation.
You are not stupid. Everything takes time and prior knowledge to learn. Any prior experience working with Redux, MobX, or Vuex helps to understand ngrx. However, you can skip those and just learn all about ngrx from different sources. Time. Don't give up.
No, you're definitely not alone who had the same experience - I had to loop through the first few minutes a couple of times too. But once the core concepts clicked, the rest of the video was no problem.
set playback speed to 0.75 and watch..... intermittently go back and forth to relate current code that he is writing
Your tutorials are awesome, It's perfect for when you want to understand the basic aspect of a concept really fast. Keep it up and thanks.
Thank you, much appreciated!
People complaining about too fast explaination. Please go through docs of ngrx first (basics). Then watch this, you'll then understand value of this video.
too fast :(, missing a lot of details
set playback speed to 0.75 and watch..... intermittently go back and forth to relate current code that he is writing
@@ssonarikar shouldn't have to, this guy needs to learn to slow down. if you were to try what he does, he switches from file to file so fast its impossible to keep up without pausing.
I am brand new to ngrx Redux, and your tutorial is so fast that I got nothing. :(
Sorry to hear that. Most of my content is geared towards intermediate-advanced developers, but I will be releasing a beginner tutorial that you can follow step-by-step in a few days.
just slow down a little , so we can digest what u say :)
Chris Tarasovs you can change the playback speed in TH-cam under the video options.
Ichange the playback speed all the time. Who wouldn't want to so that.
it takes watching many of these videos to understand redux. Try watching the egghead.io Dan Abramov redux video course, it's free. That will teach the redux pattern. Then come back to this one when you need to make it work with ngrx/store.
OK, I didn't understand anything the first time I watched this a few hours ago, but then I watched another video that explained it better, and this was a useful quick summary.
I'll probably come back to re-watch this, as a refresher, but it's not very good to learn the concept initially.
what other video did you watch
I think you have affected so many companies by now from your tuts, love your work!!! 🔥🔥🔥
If you're watching in 2021, make sure you import your "FormsModule" to have access to [(ngModel)]
.
Meanwhile, i'm battling with the console error
.............................
Types of parameters 'action' and 'action' are incompatible.
Type 'Action' is not assignable to type 'All'.
Type 'Action' is not assignable to type 'Reset'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"[Post] Reset"'.
25 post: postReducer
Great speed! Listen, Pause, Read, Back-forth super easy. Me like!
Anyone watching this tutorial in 2023. Some syntax has changed for ngrx, like there is a dedicated method called createAction() to create actions and something called for payload of an action. For the concept though, this tutorial is still one of the best
This was done in 2017, so it is a bit outdated now. First part is ok, but the second part will not compile and it seems that the recommended way of doing things has changed in the meanwhile.
great tutorial for someone who already knows something about redux and wants to use it in angular. If you want to understand from 0, search for a largest tutorial where explains what is an action, reducer, effect, etc.
9 minutes of exactly what I needed, thank you!!
It's important to realize that actions are events, not "ways to change state" or things that are "trying to change state." They represent what happened only. Reducers own the responsibility to decide how its state should change.
In app.module.ts "post" not assignable to ActionReducer and "simpleReducer" is unknown
I just wanted to say that I liked your video, I'm experienced with React+Redux and I have to maintain Angular application now. I head abour ngrx and this video is perfect for me to know how it works. In 9 minutes! It's great, thanks for the vid, it's just not for beginners.
Nice quick and understandable of course when you do a rewind. Well done
Don´t forget to include the FormsModule into the appModule so the tutorial works propertly
Thanks for the video - quick and easy explanation!! This saved my time reading tutorial
Very good tutorial, the narration and video are in sync and clear.
great video, i need to make some observable value that will be subscribed by multiple child component at different time so i thought that ngrx maybe a best solution instead of using static observable for it and after watching this video it clear to me that ngrx is the best solution that i can use.
Question: State in Redux is immutable object. So why you mutate the state in simpleReducer function? I mean the follow code: return state = 'Hola Mundo', in video it is in 2:30
In this tiny example the state is just a string. And strings in JavaScript are immutable.
One thing that I dont get is, if the porpouse is to have a single object for all the state in the app, why all examples out there always add multiple reducers to the store, I mean, every reducer has it's own payload, and the state managed in this reducers is strong typed. I just dont get how all of this can be a SINGLE object.
In the project you build on this video, you have the postReducer and the messageReducer - how handling the postReducer and retuning a state of type POST does not overwrite that MESSAGE part of the store object?
I found this tutorial very insightful and I really got a lot of information from it. Some complain that it was "too fast" but I disagree. I did end up pausing it and would jot down notes then replay it again. It's fast because it's very high level.
Really good content....thumps up ....but it's at God speed....I will keep revisiting the video....for more clarity everytime. Thanks.
Great tutorial, what css styles / ui lib are you using in this tutorial?
Crystal clear explanation! Thank you!
@3:45, when the button is clicked the console seems to be outputting the previous state not the new state
Please slow down the pace with which you explain.Give some time for viewer to see the changes that was made.
Thanks for the feedback. I'm working on that ;)
Bro reduce the play speed, this may help..
or pause the video
@Ales Kosi Oof ^ this guy has entered the chat.
If anyone gets an issue in their app config after following the second example try removing the readonly keyword from the type parameter of your actions. I assume that something changed since the video was made.
Life-saver ! God bless you for all of these awesome tutorials......
Exactly to the point.. Got what needed! .. Thanks, Fireship!
Hi there, very interesting! quick question, did you make any further video later ? I mean recently in 2020 ?
it is useful for event sourcing or command bus ... Thanks for sharing!
Thanks for tutorial. Made perfect sense to me at first watch only. I tried different others but your explanation was top notch.
Yo your tutorials are legit super good love the pace.
Men, your lessons are one the best on the internet. Thank you so much! Good structure, concise and clean. Thinking about to buy your book. What are the benefits of doing so? Do you have a paper version?
Thank you! You're better off buying a pro membership and getting the book for free angularfirebase.com/pro/
Well explained thanks! I didn't feel it was too fast.
@3:45 on clicking spanish it says good morning which is english ? kindly clear
Perfect for me! congratulations. I've developed js until 5 year ago. Now deeping into the new frontend approach de on a new job. It's time to study in detail the framework docs in deep and apply it to my job.This kind of material it's the thing that I am looking for, everytime I need to update my experience. Thank you!
Finally what I have been waiting for....can we get an example for CRUD items on firebase with NGRX?
Funny you should ask. That's the exact topic of my video tomorrow. It will cover retrieving and updating Firebase data with ngrx/effects.
github.com/aaronksaunders/ionic3-ngrx4-angularfire
Nice video bro, which code editor are you using? Please tell as I am exploring different kinds of code editors.
Do you know how to use the new pattern used in ngrx
I'm still learning but whats the difference between setting a singleton service compared to using ngrx store?
Doesn't the singleton service contain a state throughout the application or am I wrong?
whats that syntax in l. 28 at 5:03 ?
Thanks for the helpful video. I'm curious, what software did you use to record/cast it?
Perfect refresher, thanks!
Thank god for this channel
+Mel Thank you!
I wasn't really sure what Redux would accomplish in Angular that couldn't be done with Injectables/Services and ReplaySubjects with seemingly the same amount of effort, but I guess there's that nifty debugging tool that makes it all worth it? As the video says that tool is the most important feature of Redux.
Instead of Object.assign, why not use the Object spread operator?
Stay tuned. I am releasing another video tomorrow about ngrx/effects that will refactor this function with the spread syntax. I wanted to include Object.assign in this video because is easier to understand IMO.
Oh totally! The spread operators, especially Object spread and the syntax is a little hard to follow when first seeing it.
this has been a gift. thank you
Thanks for the fast tutorial
What happens when you refresh the page on the browser? Has the Store persistence of the last state? Or simply will be it reset to the default state?
The state resets. There are different strategies out there to rehydrate on full page loads github.com/ngrx/platform/issues/856
A selector would come into play if say you wanted to change the value of a variable. correct??
Does using this provides any advantage over the out-of-the-box features of angular?
Let say I use Redux to keep track of changes on my entities being displayed on a index, a list for a CRUD. So every time the user creates/deletes/updates one single entity, I have to dispatch an action to update my entities store. That in turn will make another copy of my entities (my state), that mean that if I have 30 items on the list, every state change will spawn another array with 30 items or so in it. After a while if the user keep making CRUD operations, won't my app end up bloated and slow?
finally a different example from the F todo apps
Click on Spanish Hola mundo state sould display right ? Why its displaying Bonjour le ?
How did you do that copy and paste?
Thanks a lot!. There is ng2-redux too, which performs more or less the same thing as mentioned in the video. The video was quite helpful though. And it would be damn quite helpful as you can just introduce one concept at a time just as you have shown here coz ngrx as a whole, and the usual conf talks about that in youtube , most times just goes over the head and doesnt help. This video was about the intro, and as you told, the next will be for the side effects, then about animations etc, and if there is a bit more realistic examples, that wud do no harm either.! One question - If you keep adding the individual reducers inside the import section, eventually the app.module gets bloated. Do we have a combineReducers kind of thing, where we just import that thing in app.module and the rest of the additions happen in that reducer file? Am sure we can do that. I love this channel!..you rock.
+Harikrishnan Thank you for the feedback! It is possible to combine reducers, but there's a pull request in ngrx currently for a utility method that will handle this exact problem, so maybe we will see that in the future.
Great tutorial but could you go a bit faster next time?
Hi Angular Firebase, This is really a best tutorial when practiced. I have post modules and gallery modules where I need the upvotes and downvotes. Do I create the upvote and the downvote as a shared reducer or each module should have duplicated upvotes and downvote again?
I tried to run this example without using a template variable but dot notation instead and it would not work, I just kept getting [Object object] - why do I need a template variable here? I also cant find any info on them in the Angular docs :(
Are you trying to show the entire object in html? If so use the json pipe {{ obj | json }}
Hey thanks for the reply...not trying to show the entire object but I thought I could do something like {{ object.property }} but this doesn't seem to work unless I set the object to a template variable e.g. "object as o" and then I can do {{ o.property }}. I wanted to know using the "as" keyword is required for using an object in the {{}}. Im coming from AngularJS and trying to learn Angular
How come you didn't import the FormsModule and you still could use `ngModel` ?? ...
quick note: Observable is now exported from rxjs instead of rxjs/Observable
Great tutorial, quick and too the point. Not every tutorial has to be a 5 hour video. Question though as I think ngrx changed (which is seems to often do which is unfortunate) - the setting of 'return newState(state, { text: action.payload })' . the action.payload has been removed from Action
why use async pipe with post in html?
@Angular Firebase - Content and Videos are too good ! Thanks for all you efforts !! Appreciate !!! But i have observed its pretty fast so every-time i have to stop and rewind 2-3 times to understand and code. Also can you please come with complete series of videos on particular topic from start to end / Beginners to Advanced level - TESTING with JASMIN KARMA, RXJS, NGRX, OBSERVABLES etc
Please keep developing the great content at less speed / slow pace. Thanks
Great! i understood it perfectly, you are very good explaining it.
this a wonderful tutorial even if is very fast but is helpful
It's too fast. Very difficult to understand
Your video helped me a lot, but i had to read trough the documentation before to fully understand, nevertheless, good job!
Thank you for sharing this informative video! 🐔🖐🏻
The tutorial is very good for people who allready know rxjs, master in angular and ts. This is the right tutorial for me. Fast and informative
To fast to understand
I don't like overheat solutions, BehaviourSubject is nice and clear. Maybe i am wrong but if you do this on massive project you will have massive problem i think because only small group of people can make changes in available time. But great tutorial !D Thanks a lot again :).
Never a dull video from Jeff. Always top notch
Hey is this ngRx v4 that you're using?
Yes, v4.
Hmm Immutable data concept, interesting, ty for video.
I've always enjoyed your videos and have found them very helpful. I've studied state management techniques and libraries for months. NgRx, Ngxs, Akita, to name a few. And to be honest, this is by far the best introduction I've seen or read on NgRx, cheers. Maybe it's just me, but I like your style, my kinda tutorials. Fabulous 🐉🎠
Awesome video! thanks a lot for share it!
darn it its 1 AM and now i have an itch to refactor some stuff in a pet project with NGRX
Nice walkthrough
Amos Wachanga Did you mean: flythrough
Facebook initially messed up the implementation on MVC pattern in their code. They fixed it up applied memento pattern and called it Flux. So Flux=MVC+Memento+Observer.
it says can't find module './simple.reducer'
You first have to create it
This is an awesome tutorial
what is payload
Does anyone remember the good old days of Classic ASP?
Thank for open new door in UI world !!!
Amazing!!! succinct and clear. Bookmarked :D
From the code in git hub you haven't used the simpleReducer in app.module.ts
I got to 7 minutes and then gave up, some of your later code edits have code missing from previous edits or the cloned code is different to the screenshot versions - very confusing? Look at all the times you edit the app.component.ts file and you'll see what I'm referring to, refer to the cloned version as a start point.
this is where javascript actually makes things better than typescript
Still I don’t get why to use ngrx if rxjs is enough
It's mostly useful for large apps with complex state management needs
thank you for ur response. i appreciate that. I'm confused because i wonder isn't just making service with replay/behaviour subject etc. enough to share data between components services and so on?
One tip. Create the file then import. Rather than importing it first
Dude, something is off with the results in the first part. The value is always one step behind. When you clicked on Spanish, it was still Hello World. Then when you clicked on French, it said Hola...it seems like there needs to be an extra click, so the data is not being updated properly.
Build at: 2022-08-25T17:52:07.576Z - Hash: e1c559633d060888 - Time: 788ms
Error: src/app/app.module.ts:34:56 - error TS2322: Type '(state: Post | undefined, action: All) => any' is not assignable to type 'ActionReducer'.
Types of parameters 'action' and 'action' are incompatible.
Type 'Action' is not assignable to type 'All'.
Property 'payload' is missing in type 'Action' but required in type 'EditText'.
34 StoreModule.forRoot({ arrayPokemon: simpleReducer, post: postReducer })
~~~~
src/app/actions/post.actions.ts:11:17
11 constructor(public payload: string) { }
~~~~~~~~~~~~~~~~~~~~~~
'payload' is declared here.