Subscribe & Binding Action Creators

[00:00:00]
>> All right, we covered most of the major surface area of the store, which we saw that gets the state, replace reducer, swaps out the reducer. Dispatch sends actions into the reducer to do battle with the current state of the application. We have one more and that is subscribe.

[00:00:19]
If you've ever used an event listener on the DOM, or event emitter in node, it's basically a way to say, I care every time the state changes. Here is a function that I will give you to go ahead. Please call this function every time the state changes. So we can go ahead and we'll make a, I don't know, a subscriber.

[00:00:42]
And that subscriber is going to be a function and it'll just console log, Subscriber, and we'll do stored getState. And we'll call the value as well, or we can do the whole object, so put that there. And now instead of using this console log here, what we'll do is, we'll say store.subscribe.

[00:01:21]
Subscribe, and we'll give it the subscriber. And you can kinda see, code sandbox is loading a few times here, but we add a space. It gets loaded, we call increment twice, it's loading each time, I can say add 1000. And you can see that every time the state changes, then all of a sudden we call that function.

[00:01:51]
Why could this be useful? I don't know. Let's say you're building a react application. You wanna pass new props every time the state changes. Cool, react redux can subscribe to the store. And we might have different mechanisms whether the hooks or the connect API to figure out what prompts the given react component needs.

[00:02:09]
And we'd be like cool, the state changed, neat. Here's what that means for the props for these components, let's pass in new props and keep everything up to date. So at this point, we've got the entire redux store pretty much covered. Right, we do have a few more of those helper methods to look at.

[00:02:28]
One is this bind action creators that we can kind of pull in. And we saw that an action creator is either one of these functions, they are simply functions that create actions, seems legitimate. And so bind action creators just gives us a way to do some shorthand. Here we kept having to say, store dispatch increment, store dispath increment, add 1000.

[00:02:53]
What if we just wanted to make functions that were bound to the dispatcher that we could just call. And that's where bind action creators comes in. So we could say something like const actions, and that could be bindAction creators. I'm gonna turn off this. Let's get rid of that as well, so we don't keep seeing that in the console.

[00:03:17]
All right, so we can say bindActionCreators and we can give it some actions. We can say increment, we're just putting them in an object. And if we look, if we console log actions now, We can see that we have an object that has the keys that we've passed in plus functions, but these will automatically call dispatch.

[00:03:40]
Now we can say add 1000 increment. And now we can say console.log, store.getState. Let's figure out what our issue is. I figured out my issue, which I bound them, but what did I bind them to? Nothing. So the first argument is the object full of all of the different action creators that you wanna bind.

[00:04:12]
And the second one is what you wanna bind it to, which in this case is store.dispatch. They're on this object, but if I just call the functions, they're not there as well, so I could, There we go. So just JavaScript at that point. Made some small boo-boos there, which is fine, let's just review this for a second.

[00:04:38]
BindActionCreators takes an object full of functions with keys and values, and gives you whatever you wanna bind them to. And now instead of saying dispatch and having to call the function, they're put onto this JavaScript object. If they didn't have the same name, I could also separate them out as well.

[00:04:54]
And now just calling the function automatically takes the action creator and passes it to dispatch. If you really wanted to, if bind action creators wasn't in there for some reason, and you really wanted to write it yourself, this kinda goes back to that answer from before that we saw, I could.

[00:05:11]
It's very similar and probably under the hood just using, let's give it just new names for a second. Where we could say something along the lines of compose(store.dispatch) and we can make either one of them using compose. Let's do that real quick, Right, cuz we saw before that we take the value of the first object, which is the action that we get and we're immediately passing it to dispatch, right?

[00:05:47]
And so if I wanted to do a bunch of them, as we saw before, I could just simply take increment, And add, and map through them, And just say store.dispatch, whatever the function was, right? This is a very simple version of what bindActionCreators is doing for us. But we don't have to do this because it is again, one more of those little helper methods that are available to us on react.

[00:06:31]
And we'll even see that we can use this, it's on redox rather. We'll see that we can use this by ourselves. But also things in react redux a few places, we'll be able to kind of use this for us under the hood, and give us different functions that we can call that can immediately talk to the store in some very simplified use cases, right?

[00:06:51]
So it's also used under the hood with a few libraries as well. The question was, when we have the subscriber, actually, we can see it right here, how do we know what values have changed? You don't necessarily know which exact values have changed. You can get the entire state that's within the store, right?

[00:07:10]
Now, the closer you're using the primitives like strings and numbers and Booleans, the easier it is to see, are they different, so on and so forth, right? One of the things that we wanna do when we're manipulating the state which is, I kind of said this in that slide earlier, which is if you change it, you replace it.

[00:07:28]
However, that doesn't mean you need to change every object that you're not touching, right? A lot of times we wanna make sure that, or if we don't necessarily add something to an array or change a property on an object, we can return the same object, which means they're gonna be referentially equal in JavaScript.

[00:07:43]
But in the actual subscriber, we'll get the entire new object. The parts that have changed will be referentially different cuz we replaced them. And the parts that haven't changed will equal their previous versions as well. So when we take pieces of that state tree, and we pass it into our react components, either react itself can be like, okay, cool.

[00:08:05]
The number for our counter was two. If it was also two last time, it hasn't changed, don't rerender the component. Okay, it's now three, I should rerender the component itself. So as we begin to break stuff up, react will actually handle a lot of that for us, so we don't necessarily need to worry about it too much.