State Management in React Native for Mac With MobX Library

Hi, welcome to the second module for course. In this lesson we will actually start writing the code for our application and we're going to start with state management. That's a little bit counterintuitive rather than starting with the user interface because I think state management is easier if you separate it from React. That is, React comes with a certain way of dealing with state but it kind of mixes a state with the way the UI is rendered so that makes it hard to reason about. So I'd rather start with that. So we're going to use MOBEX. MOBEX is a library based on the observer pattern. So here I am on the MOBEX website and you can see this kind of this small graph . So basically on MOBEX you have certain events that trigger actions, those actions update an observable state. The change in your state notifies the computed values which recalculate themselves and those trigger side effects like rendering or rerunning a function and other stuff. So basically the main piece of the puzzle are observables. An observable is nothing more than an abstraction around a basic value. So once you have a value you wrap it into an observable and that makes it, that enables it for it to be observed by other objects and other functions. So if you're a native Swift developer, maybe you have worked with a combined framework. So it's the same idea. So MOBEX is traditionally used with classes. Here on the website you can see the first example that they give you is with a class but we're going to use factory functions. That's going to make our life a little bit easier. So let's just set up our first piece of code and then we will go over the properties a little bit more into detail. So I'm just going to start setting up a root store. A root store. It's going to be the entry point for all of our state. So I'm just going to go into our application and on the source folder I'm going to create a new file. It's going to be called store.tsx. I'm just going to take the code in the lesson and I'm just going to paste it into this file. So let's just walk over it. First I import a create UI store function which is not there. We're going to create it in a little bit but it again follows the same pattern. This is a factory function for a specific store. Then I'm going to declare a root store type or an interface which is going to help the Type3 compiler figure out all the types. The problem is that we cannot derive all the types from our small stores because they depend on the root store. And we cannot derive the type of the root store without creating the smaller stores. So it kind of records it problem. So we're just going to give the compiler a hand and just tell it, you know, this is our UI store, its return type is whatever this function declares. So we're just giving the compiler a hand here. Then we have our main function. This is where we're going to create the instance itself of our root store. So here you can see it. We have the store. It's just an empty object for now. And we declare it as any because once we return it the type the Type3 compiler is going to figure out on its own. So then we create a new property and we actually call our UI store and we pass our root store instance. Right? So this is so that the smaller stores have access to all the global state or to the other stores so they can call another function, they can talk to each other. And finally we return the instance of the store. So we will also import a final instance. This is the one that we're going to use on our main application. And we could have just created this on the module level without a function. But by putting this into a function that makes it nicer for testing. Right? If at some point we need to create an empty root store, we can just call this function and not worry about how the module has been loaded or any other stuff. So before moving on, let's just go back to the lesson a little bit and let's talk about computed properties in actions. So an observable is fairly straightforward. It's just a wrapper that runs a simple object or a simple value which can be observed. But we haven't talked a lot about observers. So observers can be their computer properties or react components. Computer properties are just that. They're properties that get computed, derived from observables. So in the JavaScript world and in Mobx, they're just functions. So functions are observers of any observable used inside of them. This means whenever a function that uses an observable inside of it, whenever that observable changes, the function is going to rerun itself. So here's a nice example in a completely different context of how this is supposed to work. And this was actually how Mobx was created. So on Microsoft Excel, you have probably worked with it. You have cells with values. And on different cells, you can actually create some formulas which are dependent on other cells. So whenever I change any of the values that fit into this formula, this cell gets recalculated. So that was the base idea that inspired Mobx. That's basically how it works. So the last part of the puzzle are actions. So the problem with observables in JavaScript is that things can get out of sync. You could be calculating some result based on the observables. And then the observable can change. So then your state is not consistent. The final value is not reflected in the state. So that's what actions are. Actions just kind of prevent these race conditions and make sure that there's order to the operations. You update the observable, you calculate it until that calculation is finished. You cannot do anything else. Great. So that's the very high level overview of Mobx. So let's now go into how to use the observables. Mobx has a fairly simple API. The latest version has made it quite a lot simpler. So we're just going to use a single function that's called makeout observable. So makeout observable takes an object and it's going to enhance all the properties in this object. So non-function properties, numbers, arrays, objects, etc., they're going to become observables. Gathers, which are special JavaScript functions, they're going to become computer properties. And any other function is going to become an action. So now comes the time where we'll create our first Mobx store, proper Mobx store. So I'm just going to take this file and back in our project, I'm going to create a new folder. I'm going to call it stores. Here I'm going to create a ui store.ts file and I'm just going to paste it. Let me just quickly fix this import. Great. So we're still kind of missing a little bit of things. Namely, we need Mobx and React bindings. So I'm just going to go to the terminal. I'm just going to do it inside of VS code. I'm going to do yarn at Mobx and Mobx React Lite. So Mobx is the library and Mobx React Lite is the bindings for the React component. Great. So let's just go over the store a little bit. So first we're going to import the makeout observable function from Mobx. Then we're going to import our type from a root store and we can finally create the main function for our store. So it's going to take an instance of the root store, which is going to make it so that this store will be able to access any future stores. Inside of it, we will create the instance of the store itself by calling make out observable and we pass an object to it. So this object has a books array inside of it. It's fairly simple. It's just titled and I created that string. So makeout observable is going to take this property and make it an observable property. Then we have get your case books function. This is going to be a computed property because inside of it, we're using the, you know, the books array. So we're just going to take the books array and we're going to map over it. That means we're going to take each book and apply a function to it. We're going to keep all the properties of the book, but the title, we're going to uppercase it. And we just need to give the compiler a little bit of a hand here and we need to declare the type of the return, the return function, which is just the same book array. The title is just going to be uppercase. And finally, we have the ad book function, which is going to take a title and we're just going to push inside of our book array, a new book, which is just an object with a title and a new creation date. So if we go back to our store, we can see that the import error is gone because we have now our UI star created. And we can finally start connecting our react state or react UI to our stores. In order to do this, we're I'm going to add just a little bit more variables into our root store. I'm just taking them from the lesson and let me just feel the missing import. So these are context. It's a mechanism of react itself to share values. So I'm creating a context, which is going to hold our root store. A provider, we're going to see in a little bit how that's used and a hook function that we're going to use inside of our components to take the root store from the context. So it's just a function, it doesn't take any parameters. And we just say use context and we pass the store context that we created before. So I'm going to go back into the app.tss file and I'm going to take one more time from the lesson, the code. I'm just going to paste it in here. So basically the thing that has changed is that we're now importing a books component from a container. We're going to talk more about containers afterwards, but this is just a React component. We're going to create it in a little bit. Afterwards, I import my root store instance and my store provider from the store file I just created. Inside of it, the first component that I'm going to use is the store provider. As a value, I'm going to pass the instance of my root store. This already has it. If you take a look into when we declared it, we already passed it, but the types are declared like this. So I'm just going to pass it again or too much about it. And inside of it, I'm going to use my books component, my books container. It's fairly simple for now. So let's just go and create our books container. So I'm going to create a new folder in here. I'm going to call it containers. Then I'm going to create my books.container.tss file. Once again, I'm just going to take the code from the lesson. Right. So let's just go over it. First I import React so I can use JSX. Then I'm going to import the observer function. So this enhances React components to act like any other server function whenever one of the observables inside of the component changes, the component is going to re- render itself. Next, I import some React Native components. And finally, I import my use store hook function from the store file. So my books component is just a functional component and I enhance it by calling observer on it. Inside of it, I have my root store, which I get by calling the use store function. And finally, I can return some UI components. So inside of this, you can see I access the root store. Inside of it, I access the UI store. And finally, I access the uppercase books. And finally, I map through them so I can display them in my UI. I take each book, put it inside the view. I need a key. This is just some React Native key that it needs to render the UI. Finally a text component where I just show the book title. I have also added a button with a simple add button title just so we can make sure everything is working. Inside of it is just a hardcoded function where I just call the add book action with a hardcoded value. So let me just save these two files. And now if we start our app, everything should be working. I'm just going to do it inside of VS Code. You can do it inside of your terminal or whatever you want. And there you go. Our books from our UI store are displayed on our UI. And if I click on the add button, it should add more values. [BLANK_AUDIO]