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.
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.
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
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.
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
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.
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.
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.
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.
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.
@@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.
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.
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.
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 🐉🎠
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.
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!
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?
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
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
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.
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.
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.
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?
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?
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 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 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
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.
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.
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.
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 UA-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.
Great speed! Listen, Pause, Read, Back-forth super easy. Me like!
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
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
9 minutes of exactly what I needed, thank you!!
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
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.
Thanks for the video - quick and easy explanation!! This saved my time reading tutorial
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.
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.
Don´t forget to include the FormsModule into the appModule so the tutorial works propertly
Nice quick and understandable of course when you do a rewind. Well done
Very good tutorial, the narration and video are in sync and clear.
Life-saver ! God bless you for all of these awesome tutorials......
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.
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.
Really good content....thumps up ....but it's at God speed....I will keep revisiting the video....for more clarity everytime. Thanks.
Exactly to the point.. Got what needed! .. Thanks, Fireship!
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.
Thanks for tutorial. Made perfect sense to me at first watch only. I tried different others but your explanation was top notch.
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.
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.
Yo your tutorials are legit super good love the pace.
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.
it is useful for event sourcing or command bus ... Thanks for sharing!
Crystal clear explanation! Thank you!
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
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 🐉🎠
Thank you for sharing this informative video! 🐔🖐🏻
Never a dull video from Jeff. Always top notch
Well explained thanks! I didn't feel it was too fast.
Thank god for this channel
+Mel Thank you!
Great! i understood it perfectly, you are very good explaining it.
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
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.
In app.module.ts "post" not assignable to ActionReducer and "simpleReducer" is unknown
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/
this has been a gift. thank you
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!
Amazing!!! succinct and clear. Bookmarked :D
@3:45, when the button is clicked the console seems to be outputting the previous state not the new state
finally a different example from the F todo apps
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?
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.
this a wonderful tutorial even if is very fast but is helpful
@3:45 on clicking spanish it says good morning which is english ? kindly clear
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
Great tutorial, what css styles / ui lib are you using in this tutorial?
Thanks for the fast tutorial
Great tutorial but could you go a bit faster next time?
Hi there, very interesting! quick question, did you make any further video later ? I mean recently in 2020 ?
@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
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.
Nice video bro, which code editor are you using? Please tell as I am exploring different kinds of code editors.
Awesome video! thanks a lot for share it!
Perfect refresher, thanks!
quick note: Observable is now exported from rxjs instead of rxjs/Observable
Thanks for the helpful video. I'm curious, what software did you use to record/cast it?
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.
whats that syntax in l. 28 at 5:03 ?
Your video helped me a lot, but i had to read trough the documentation before to fully understand, nevertheless, good job!
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.
Hmm Immutable data concept, interesting, ty for video.
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?
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?
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 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 :).
Thanks for advance
Your code is pretty.
Does using this provides any advantage over the out-of-the-box features of angular?
Do you know how to use the new pattern used in ngrx
This is an awesome tutorial
Click on Spanish Hola mundo state sould display right ? Why its displaying Bonjour le ?
darn it its 1 AM and now i have an itch to refactor some stuff in a pet project with NGRX
A selector would come into play if say you wanted to change the value of a variable. correct??
How come you didn't import the FormsModule and you still could use `ngModel` ?? ...
Yo entiendo muy poco ingles, pero el video estuvo genial, ahora se usar Redux, muchas gracias
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
Does anyone remember the good old days of Classic ASP?
How did you do that copy and paste?
Thanks for the video bro.
Nice walkthrough
Amos Wachanga Did you mean: flythrough
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
To fast to understand
One tip. Create the file then import. Rather than importing it first
It's too fast. Very difficult to understand
if its too fast...watch his other videos.....theres a bit of a learning curve required
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.
Thank for open new door in UI world !!!
It took me ten years to realise I forgot the | in the 5:01
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.
Contrary to popular belief in the comments, I think the speed is perfect.
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.
From the code in git hub you haven't used the simpleReducer in app.module.ts