Angular ngrx Redux Quick Start Tutorial
HTML-код
- Опубликовано: 28 авг 2017
- Learn the basic concepts and design patterns behind Redux and NgRx store. I will show you how to build a basic Redux app with Angular4 from scratch.
Full Lesson: angularfirebas...
Demo App: github.com/cod...
NgRx: github.com/ngrx 
Наука
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
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
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
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!
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 RUclips 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 tutorial for all who know the Redux concept, it works for me! Unfortunately, for newcomers it might be a bit difficult because of the speed.
Completely impossible to follow for a newcomer like me.
if ur a new comer and cant follow then you havent mastered the base concepts yet. You should return to those.
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.
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!!! 🔥🔥🔥
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!!!!
9 minutes of exactly what I needed, thank you!!
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
Thanks for the video - quick and easy explanation!! This saved my time reading tutorial
Don´t forget to include the FormsModule into the appModule so the tutorial works propertly
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.
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.
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.
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.
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.
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/
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......
it is useful for event sourcing or command bus ... Thanks for sharing!
In app.module.ts "post" not assignable to ActionReducer and "simpleReducer" is unknown
Crystal clear explanation! 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.
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 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.
Really good content....thumps up ....but it's at God speed....I will keep revisiting the video....for more clarity everytime. Thanks.
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.
Exactly to the point.. Got what needed! .. Thanks, Fireship!
Thanks for tutorial. Made perfect sense to me at first watch only. I tried different others but your explanation was top notch.
Thanks for the fast tutorial
Thank god for this channel
+Mel Thank you!
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 🐉🎠
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.
quick note: Observable is now exported from rxjs instead of rxjs/Observable
Well explained thanks! I didn't feel it was too fast.
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?
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
Perfect refresher, thanks!
Yo your tutorials are legit super good love the pace.
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
this a wonderful tutorial even if is very fast but is helpful
this has been a gift. 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.
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!
Great! i understood it perfectly, you are very good explaining it.
Thank you for sharing this informative video! 🐔🖐🏻
Great tutorial but could you go a bit faster next time?
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.
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
@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
Never a dull video from Jeff. Always top notch
Thanks for the helpful video. I'm curious, what software did you use to record/cast it?
Awesome video! thanks a lot for share it!
Nice video bro, which code editor are you using? Please tell as I am exploring different kinds of code editors.
Amazing!!! succinct and clear. Bookmarked :D
finally a different example from the F todo apps
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?
Great tutorial, what css styles / ui lib are you using in this tutorial?
This is an awesome tutorial
Hi there, very interesting! quick question, did you make any further video later ? I mean recently in 2020 ?
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.
Your video helped me a lot, but i had to read trough the documentation before to fully understand, nevertheless, good job!
Click on Spanish Hola mundo state sould display right ? Why its displaying Bonjour le ?
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 :).
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?
@3:45, when the button is clicked the console seems to be outputting the previous state not the new state
Nice walkthrough
Amos Wachanga Did you mean: flythrough
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.
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?
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.
Thanks for the video bro.
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` ?? ...
Thank for open new door in UI world !!!
Yo entiendo muy poco ingles, pero el video estuvo genial, ahora se usar Redux, muchas gracias
Thenk you great tutorial
Thanks for advance
Your code is pretty.
Do you know how to use the new pattern used in ngrx
Does using this provides any advantage over the out-of-the-box features of angular?
@3:45 on clicking spanish it says good morning which is english ? kindly clear
First 90 seconds. Just wow!
Nice *BOILERPLATE* tho
To fast to understand
Great! Thanks
Does anyone remember the good old days of Classic ASP?
Well, that's some good material.
It was hard to follow from the get-go, after 4 minutes and 50 seconds (with me re-watching snippets multiple times) I gave up. Cant follow what is happening, what things are, what things are connected, even what are actual commands and what are custom names and variables.
he was explaining this to him self :P
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
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
How did you do that copy and paste?
I could only watch this at 2x speed tyvm
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.
It's too fast. Very difficult to understand