This course has been updated! We now recommend you take the State Management with Redux & MobX course.
Transcript from the "MobX data structures: arrays, objects, and maps" Lesson
>> Steve Kinney: So we've seen it with classes. We could also observe objects or arrays. And my favorite part about using observable with arrays, is that you can push stuff onto the array, and that is a legit away to render UI again. You don't have to like concat things on or spread operator all over the place.
[00:00:18] You can actually just push things on. It basically takes all of the methods that arrays have and that objects have and does immutable versions of those. So you can push something on, it will have the same object, but it will have triggered the observable to let everything know.
[00:00:32] So that code of honor that we walk in with react is like never mutate state, right? Because the way Java Script works is if you change an array, and push something that has still the same array and memory. And like React and Ember and all those things have a really hard time knowing the array has changed.
[00:00:49] Versus if you replace the arrays. Like this is a totally different array, I should rerender. With this, you can actually put stuff on. And because the observable can let things know that things have changed, you can actually do all the habits you've been working so hard to break.
[00:01:28] It can have an object as the key, it could have a function as the key, it could have another map as the key. But they're just like a slightly more flexible version of objects. And the reason I bring it up, they are very cool. Just FYI, if you need to, rather than, what is the string version of this?
[00:02:08] That's just a new key, it's not been observed. A map will actually be able to go through the process and make that also observable. So if you plan on adding new keys to this object later, use a map. If you're not ever gonna change the object's keys, you can use an object.
[00:02:23] But which is a little caveat that I think you'll be happy to know. And just to kinda like tie some things together, under the hood, the way this is working is, instead of having properties we're having thunks all over the place, right? These are, we're getting different functions that can either resolve to a previous thing or alert different things.
[00:02:44] Very cool, so we've looked at mobx in isolation. We've even seen that we can effectively re-render UI with it. Let's look at how that actually works with React.