State Management with Redux & MobX bindActionCreators
Transcript from the "bindActionCreators" Lesson
>> 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: 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.
>> 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: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.