MobX in React

[00:00:00]
>> Steve Kinney: Buybacks, super cool. We play with a little bit outside of the DOM. Let's talk about it in React. Right, so, you'll notice that I had to decorate this class component with observer. Before when we were looking at ModX, we had things that were observable. [LAUGH] Right, and then we can decorate a React class with observer.

[00:00:27]
And then any time one of the observable objects changes inside that class it will trigger React to rerender. Now, I wanna repeat something that I said a few seconds ago, which is that our computer properties don't change or re-trigger unless something that relies on changes. Which is why you can tend to avoid should component update.

[00:00:50]
Because if an observable, because it's only the properties you're looking at too. If an observable has triggered a change, something's changed. The component should update. Right, and so you can do that. If you, again, don't want to use the decorators or you're using a state-less functional component, which can't support decorators, you can just use it like a function and pass it in.

[00:01:15]
Like the same way you'd use react.memo. That's why react.memo effectively exists as well. It's the same basic idea. Cool, you could also do it with a container component, where you could do an autorun when anything happens. Like you don't need to. But you can use some of those other derivation [INAUDIBLE].

[00:01:37]
Effectively, what MobX-React. A thing that I just want to put on the table, it's react-redux. That's the connector and it's mobX-react that's the connector the other way. So if you see me typing it wrong, catch me. And It gives you an ability to, very similar, normally in Redux React, we have one store that we'll pass into a provider.

[00:02:00]
We can theoretically pass in multiple stores into the provider that are available throughout the application. And the other thing that we're gonna need to look at is in React, we used the connect function and the map state to props and the map dispatch to props in order to kind of figure out, to create our higher order component.

[00:02:22]
In mobx it's another decorator, which is very elegant in my opinion. You just annotate it with like at inject and then the story you want to inject into it and then it's available in there as well. If you're using a functional component, you don't have the ability to do that, to inject a store like that, so you could use the functional version.

[00:02:48]
Right, inject store is a function waiting for the one that you're trying to observe. So this will then pop in the item store as a prop, right? And then we still have the observer there. So we're injecting our MobX object as a property into, and the provider lets us not have to do prop-drilling, right?

[00:03:07]
It allows us to just do this effectively anywhere in our component hierarchy. But then the component itself still needs to observe in this case. Cool, so let's just look at a basic example for the counter. We'll look at it both without decorators and with.
>> Steve Kinney: This is kind of one we saw before.

[00:03:30]
I have the ability to like listen for it here, but you can see that we're decorating the account object and I'm passing it in, right? If you don't need the ability to have those cross cutting concerns in a component hierarchy, if you don't need the provider to like, hey, I need to give this to a great grandchild component.

[00:03:49]
As long as the component itself is wrapped in observer, it will look at the props that come in notice which objects and properties are observable and trigger the rerender whenever those things change. You don't have to do anything, like this is a functional component. And countdown increment is just a property on that class.

[00:04:15]
Right, it's almost like a lot of the stuff that we've seen we can just kind of like make believe, it's almost like how you wish this stuff worked. So count.increment, we're just calling that on the instance of account. And we are, the observable value is the actual count itself, right?

[00:04:36]
So I can even fire up the console here and I put the count on the window, so I could do stuff with it. So, for instance, count there and it looks and feels like a plain old JavaScript object, right? What if I say count.value equals like 500? The React object just changes.

[00:05:02]
I'm basically mutating a JavaScript object. And mobx is doing a whole bunch of sorcery. And you can kind of see some of it, like the observer is going ahead and effectively using the high order component pattern to wrap it in a state container, right? We've seen a bunch of these stuff at this point.

[00:05:21]
Like [LAUGH] we've half pulled back the curtain in the Wizard of Oz here, all right? And we're able to have a lot of these in place which is I think, really, really cool. Yeah, you can just basically mutate your objects and treat it like you're not dealing with any of this.

[00:05:38]
Which is really neat.