Advanced State Management in React (feat. Redux and MobX) Redux Dispatcher: bindActionCreators

Transcript from the "Redux Dispatcher: bindActionCreators" Lesson

[00:00:01]
>> Steve Kinney: So it would be great if we had some ActionCreators. That's pretty easy to do. I could say, const add. We'll take a value. We've seen this pattern before. And it will return a new object of the type, ADD, and whatever the value is. I'm using that ES6 shorthand again, so that will really devalue, but the promise of ES6 is I get to type less.

[00:00:30] Hopefully, never the word function, but we're gonna see that's not true. So ADD is a very simple function, it just creates an action. So now we could say store.disp, save this and Clear and Run. store.dispatch, we'll say (add(4)). Do it again, right? And we can see that now, we can do all sorts of things.

[00:00:52] I don't have to just copy and paste that add action that I stored in a variable before, I can change this to 8, and now we see 16. I can put in 8,000 million, I think we're up to a dillion at this point.
>> Steve Kinney: So you can see that we're 8 dillion 16.

[00:01:09] A dillion's not real, just FYI. [LAUGH] Don't go into a very intelligent conversation and start bringing up dillions of items. All right, cool, so we could do that. We can do a few more of these, let's have some ActionCreators for our two error messages. So we can kinda do anything we need to do.

[00:01:27] And again, these are simple, they are just functions that will go ahead and return objects. So, we'll have a SET_ERROR_MESSAGE, and we'll have a CLEAR_ERROR_MESSAGE. I'm just gonna break these up a little bit, so we can see them in my kinda small screen. So now we can create these actions, and we can dispatch to the store, that's very cool.

[00:01:50] Let's go back up to the top, and figure out where we are in learning all of Redux. We have this one called bindActionCreators, so I have ActionCreators. I'm somewhat familiar with function.prototype.bind, so I understand what binding might mean, right? But I don't know what this one does yet.

[00:02:07] So, I feel like to best understand bindActionCreators, we should look at this in two ways. There is bindActionCreators plural, but it might be easier to look at what it means to bind an ActionCreator, singular? Cuz if we bind an ActionCreator singular, then we can just extrapolate that it's doing that more than once.

[00:02:24] It turns out, you could write this function in about one line. So we know that the way that we get actions to the store is dispatch. So, we're gonna write a new function that's not included in Redux, it's gonna be called bindActionCreator singular. And it's going to be, kind of overly simple version of a single bindActionCreator.

[00:02:52] And so, a lot of times the big difference in a lot of these, if you peek open the React code, you'll see a little bit more error handling, and stuff like that in edge cases, but this will be good enough. So you should, probably, use the one in the library.

[00:03:03] So it'll take two arguments, it'll take the store, or it'll take action, rather. So the action that we want to bind, and the dispatch method on the store that we wanna bind it to.
>> Steve Kinney: And does anyone wanna take a lucky guess, what it's gonna do with these two pieces of information?

[00:03:23] It's gonna bind the action till the dispatch. And so, what it'll do is, it actually return a brand new function, which will take some number of arguments. And so then we'll dispatch,
>> Steve Kinney: Whatever action was really passed in, given all those arguments. So, let's break this out a little bit because,

[00:03:53]
>> Steve Kinney: So it is a function that returns another function, that takes some arguments, and then uses the store's dispatch, to fire the action with whatever arguments you gave that second function. That is slightly confusing, so let's actually look at it in action. So we'll say const addValue just to give it a different name.

[00:04:20] So we'll say addValue = bindActionCreator.
>> Steve Kinney: And so we have that add ActionCreator that we created up here. And we have the store.dispatch.
>> Steve Kinney: Very cool.
>> Steve Kinney: This is where it all comes together, you're ready? So now we have this addValue function. And we say, addValue, and let's say, 12.

[00:04:48] Look, we add a 12. addValue(15), look, we're at 27. Effectively, what we did is we created a new function that is already binding the ActionCreator to the stores. And now we can call this, it's automatically gonna dispatch that action to the store. Which means, we don't even have to deal with any of the store.dispatch anymore.

[00:05:04] We don't have to deal with any of that. We just simply have this function that will update the store. The store has a subscribe method that we could, if we weren't using react to blow away the entire Web Page, right? So every time we call the function, the UI will change.

[00:05:19] No react involved, right? Pretty quick like we've gotten this pretty much together, but that's bindActionCreator. What happens, what is this bindActionCreator? Ideally, you have in a lot of pieces of user interface, more than one action. And it would be nice to do a bunch of them at once, so all bindActionCreators plural does, is does this to a number of them.

[00:05:43] And we could, again, implement a really kind of overly simple version of it by hand. So we'll say const bindActionCreator.
>> Steve Kinney: I might give it a z, so I don't overwrite the one that I pulled in at the top of the file and get yelled at. So it's very 90s.

[00:06:06] So we'll have this new one, that again, will take actions, plural, and the dispatch.
>> Steve Kinney: And what it's gonna do is, it's going to return a object that's gonna have a bunch of methods, that are then going to be boundActionCreators, right? So I'll just have an object full of methods, rather than a single function, that's really it.

[00:06:30] And so what we'll do is, we'll return, effectively, it's giving a new object but we have to do some work to get there. We'll return Object.keys for all the actions. So now we have all the properties of the object that was passed in. And we could say, reduce,

[00:06:53]
>> Steve Kinney: And what we want to get at the other end is a new object. So I'm gonna pass in the second argument to a reduce is what you want the initial state to be. So we'll start with an empty object that we're gonna build up. So say, reduce, and we'll say this is called boundActions this object, cuz I got to name it something, and whatever key we're currently on.

[00:07:17]
>> Steve Kinney: All right, so in here, we're just gonna make a new key on this empty object. And we're gonna use our singular bindActionCreator to bind an action onto the new object. So we'll just say boundActions. Remember, that's starting out as an empty object but let's say we're on the very first key.

[00:07:35] We're gonna add that key to the empty object. We'll say boundActions, whatever that key is. And we'll say bindActionCreator singular,
>> Steve Kinney: With the action that is unbound and then the dispatch that was passed in. Cool and then we just return that object out of the reduce to get it to the next one.

[00:07:59]
>> Steve Kinney: So what I could do now is I have this setError and clearError. What happens if I do bindActionCreators,
>> Steve Kinney: And we'll give it an object that's got a set, which is going to be, what did I call it, setError?
>> Steve Kinney: And we'll give it a clear, which is gonna be clearError.

[00:08:36]
>> Steve Kinney: I'll call this const errors.
>> Steve Kinney: And we'll give it a reference to the store.dispatch, cool. And so, what I'm gonna get back is an errors object, effectively. And it's gonna have two keys, set and clear. If I call set and pass in an error message, it's going to set the error message in the state.

[00:08:58] Which is gonna trigger the subscribe, which will theoretically trigger a new UI. If I hit clear, it's gonna clear the error message. Let me go to that subscribe function before, and actually, where did it go?
>> Steve Kinney: We want the subscriber. Well, let's actually show the entire getState.
>> Steve Kinney: Cool.

[00:09:20] So let's try this out, we'll say save it. Give myself a little room over here, Clear and Run, now let's look at errors. It's an object with a clear and a set. So if I say errors.set, Something went horribly wrong.
>> Steve Kinney: Just hope, I didn't make a typo where I can't see there.

[00:09:43] SET_ERROR_MESSAGE is not defined, because I have to make those strings.
>> Steve Kinney: Not constants.
>> Steve Kinney: All right, error, something went horribly wrong. I'm just calling a function and it's automatically taking care of everything because I've bound it. The ActionCreator to the stores.dispatch method. So here we can see something went horribly wrong.

[00:10:12] We can say errors.clear.
>> Steve Kinney: And we can see if the error message is gone. We can now manipulate the entire state of our application, effectively. We have gotten most of the way to like, writing everything that we need. Whether it's a React application or you can do this with ajQuery application, if you really wanted to.

[00:10:33] That's totally, legitimate to do as well. You'll see that Redux actually gets used a whole bunch of places.
>> Speaker 2: So what happens if you have two actions of the same type? Like you made a mistake and named them the same way.
>> Steve Kinney: So that won't be a problem here, cuz we're just shooting out an object, right?

[00:10:52] That will become a problem in the reducer when I'm checking for the action type, right? And theoretically, I want to do one thing there but that's gonna get hit in the conditional where I'm checking is the action type this, or is the action type the other thing. But with the ActionCreator, it's literally just returning an object.

[00:11:08] Dispatch is literally gonna just send that object to the store. It's not keeping track of all of these, right? You can't really have two keys on the same object. The last one will just overwrite the previous one or more likely ES6 will get very angry with you. Like, one of those two things will happen.

[00:11:24] Nothing will blow up, you'll have one of those subtle bugs to find later cuz you typed the same thing twice. It's not necessarily an error, it's just unfortunate. [LAUGH] Cool.