Review of Angular 2, RxJS, and Reducers from ngrx/store
This lesson summarizes everything the course has covered and how Angular 2, RxJS, and ngrx/store work together to achive a reactive application.
[00:00] To recap everything we've talked about, because this was a ton of information, we're using the NgRx/Store library in here, which gives us a provide store. You configure this store with reducers, clock and people.
[00:15] Clock and people are in our reducers file as functions. Take state and actions and then change the state based on that action, so that store, based on those reducers, is available in our application when we inject it through the constructor of a component.
[00:36] We select the clock, meaning that any of the values coming out of the state of the clock that have been reduced by that reducer will be available as this time, and these are available in our templates when we use the async pipe. They would just be observables by default, but the async pipe allows us to subscribe and push out those values into the template.
[01:01] Anytime we want to update those stores, we dispatch actions into them. In each of these scenarios, we're dispatching different types of actions.
[01:11] A click is dispatching an action type of hour with a payload of this current value in here. A second is going every single second and dispatching a type of second with a payload of one.
[01:27] When you read that in the reducer, you can read a type of hour is coming through, so we hit hour. The payload was coming through here, so it's going to set the hour based on that payload. Similarly, second would come through, so it hit here, and it would set the seconds based on that payload.
[01:45] Finally, the last thing we showed is that our people reducer can also access the clock reducer, so these reducers can work together. You can compose them together to build related objects.
[01:59] Anytime we want to update the time of the person, we can just reach up to that clock reducer and then give it that same state, so the person time is a current time. It defaults to a new state, but we can pass in the current state of that person. Then we can pass in that same type and payload.
[02:21] This is not using the store dispatch. This is just regular old JavaScript reducers talking to each other. This really has nothing to do with store dispatch when it's two reducers talking to each other. It's just this function using that other function. It just so happens that they work well together when you compose them, or they work well together as a method of dispatching and updating the state inside of the store.
[02:50] There may be a lot of concepts unfamiliar to you with latest from or other operators that might be new to you or subjects or ways of writing Angular 2 templates. Reducers might be new to you. There are a lot of other courses on Egghead that have videos on reducers, that have videos on Redux, which is a pattern that follows reducers and managing state and actions like this.
[03:14] Or other lessons on RxJS to teach you all about observable merge and subscribing or other lessons on Angular 2 to teach you all about templating and components.
[03:24] This course was a combination of Angular 2, of RxJS, and of a lot of concepts from the Redux library that are now in use from the NgRx/Store library.
With multiple reducer functions in reducers.ts, how does Redux know which reducer you're dispatching to when calling store.dispatch?
If I want to load something async and fire an action to ngrx at start and finish, is there an idiomatic way to do that with RxJS?
Angular 2's router seems to break the RxJS pattern established in this course. How do you mesh Angular 2 routing with RxJS?
With multiple reducer functions in reducers.ts, how does Redux know which reducer you're dispatching to when calling store.dispatch?
That's an interesting question. Can you answer that? It seems like that with every dispatch all of the reducers are being processed. Does that mean we cannot have 2 actions with the same name in different reducers (assume the case of a 3rd party plugin built with ngrx, that has the same action name as I've created in my own app)?
Awesome course! This type of course is why I subscribe to egghead.io! It integrates several different technologies in a single example building from the basics to the end result. I can look up reducers for free, angular2 for free, rxjs for free, but will easily (and do obviously!) pay for expertise that combines each together in a way that I can't easily look up myself. This saves me researching the different topics in isolation and then trying to combine them on my own without lots of trial and effort, and then adds expertise which I still wouldn't have if I tried to do all that myself! Great job.
This is a great combination of all recent things I've seen in the last year. Thank you sir!
Great course!!
This is a really critical question for me. Was this ever answered ?
It doesn't. The dispatcher calls each reducer with the same action payload. This is why it's important to have a unique type name if you don't want multiple reducers to process the dispatched action.
That's why we have const. This will error out if have the same name of the actions. There is one better solution, use Symbol from es6. :)
What about RxJS unit tests?
Best course on Egghead by far. Thank you, really enlightening!