bindActionCreators

[00:00:00]
>> Steve Kinney: So, we've got now this bindActionCreators. BindActionCreators is an interesting one. It just basically helps you do stuff a little bit more easily. And so you've probably heard the word bind before in a function.prototype.bind. When we're binding, especially like in a react application, where you're like I don't want to lose context of this so you can return a new function.

[00:00:31]
BindActionCreators, you'll notice that, we'll actually make an action creator first. So we'll say for instance,
>> Steve Kinney: An addAction. Like we saw, we were just passing just pure JavaScript objects in there and everything word. I told you earlier that
>> Steve Kinney: I told you earlier that effectively like action traders are totally optional.

[00:01:03]
I do recommend them using, recommend you using them which is, let's say we wanted to add something multiple times that someone was hitting the calculator buttons in our application. We would have to type this out every time. And I mean, you've been watching me live code. I've clearly made typos.

[00:01:20]
Doing this is tedious, especially as this payload part grows. So we'll actually, really this is even more complicated. Complicated is a strong word. It's a lot of typing. Do I want to do this every time I wanna add a number? No. What I might do is,
>> Steve Kinney: createAddAction, I'm using those words to signify that as an action creator.

[00:01:53]
There's no actual rules. I probably won't use this in like a larger application. But right now as we're getting these concepts down, I can do that. And I can basically give it an amount,
>> Steve Kinney: And I can say, effectively take this.
>> Steve Kinney: Put that amount there or do the EX6 shorthand.

[00:02:24]
Now, again, pure JavaScript function. Nothing special, all that it does is it returns that object for us. There I've got some indentation extra price there.
>> Steve Kinney: There we go, all right. So now I can just say, createAddAction(4), and I'm going to get the same object out. It's just basically a shorthand to do this.

[00:02:57]
Now, what you might find is now having to say like.
>> Steve Kinney: You build your application. Writing to store.dispatch is hard. You're like hey I'm not making these actions for funzies, right? Other than my unit tests if I'm calling this function, I wanted to change the store. So what bindActionCreators does for you basically, it's again, not actually redux related.

[00:03:27]
It's an ability to kind of go in and effectively create a new version of the function. So we'll say like, we'll call it like,
>> Steve Kinney: DispatchAdd and all we have to do at this point is we'll say, bindActionCreator.
>> Steve Kinney: Now, that's gonna return a new version of this value comes in, object comes out that does this.

[00:04:04]
So effectively
>> Steve Kinney: These two are exactly the same. It is just a helper function that allows me to create a new version that now whenever I call dispatch.Add or handled dispatch, they will both create the action, that object, and dispatch it to the store. So now I just called this function, action gets dispatched, the action goes in there with the current state of the world, a new state of the world comes out.

[00:04:46]
And we get everything in there.
>> Student: Can you show me where the first thing you're passing to bindActionCreators add, where that's coming from?
>> Steve Kinney: This should be this createAddAction.
>> Student: Okay?
>> Steve Kinney: So it's this function, take this function, call it and dispatch the result out. Will come through and it's basically just hooking all this stuff up and plumbing it together.

[00:05:11]
So really like, composes helper function by the action creator is a helper function. And it's just yeah, combined reducers it's just a helper function. You could write each of these in JavaScript real fast. They are yeah and obviously you can see that like. The one that we got out of Redux has got a lot of error checking and stuff along those lines, totally useful.

[00:05:35]
Don't write your own, use the ones that come with the library, but they are effectively just regular old JavaScript helpers. And the store is simply an event emitter. It's the ability to get the current state out of there to dispatch an action, to subscribe to events. All kind of very standard stuff that we can do, which is super cool.

[00:05:58]
So we've got one more and,
>> Steve Kinney: In React Redux, there's also a pluralized version of bindActionCreator called bindActionCreators. Which takes a bunch of these actions, like an object of them, and binds them all with the same dispatch. Yeah and honestly, if you really wanted to, like I'm not using that.

[00:06:24]
You could write your own. You do something like bindActionCreators. Give me a set of actions, like an object of actions and what the dispatch is. In this case it's our store.dispatch. And you can basically go over all the keys of that object. This will get back yeah, it was add, subtract, multiply, and they each had a function as a value.

[00:06:55]
This would work for all of them. Go through each of them and return me back a new object.
>> Steve Kinney: Reduce, we'll start with reduce. Basically reduce allows you to start with an object and add to it as you iterate over an array. So, we'll start with a empty object.

[00:07:15]
We'll take that object every time as we go through each one. So let's say it's add, multiply, subtract and divide. We'll start with the add, multiply, and so on and so forth. We'll add to it so we'll say call the key and an object. [SOUND] And boundActions [key] bind it to dispatch.

[00:07:43]
Effectively we've now created that react Redux one when we see it as well. Again, a lot of this is just it seems like when we see it like with map dispatched props and map state to prop like very complicated when we see and react. It is effectively, with a lot of error checking and some guard routes, a Javascript function that mutates an object, and fires events as we go along.