You can think of it like mobx in strict mode.Now we are importing `configure` from the mobx package and applying `enforceActions` as true. So it is a good practice to modify states in actions instead of regular functions.Before learning more about actions, we are going to apply a configuration which allows only actions to modify states. We will cover computed property later in detail. Regular functions can also modify the state but actions yield better performance and It informs computed property whenever action is completed. Now we will be able to see changes in UI whenever there is any change in mobx state.ActionsActions are functions that modify the state. After doing that Mobx will make sure your state and Component remain in Sync all the time.That can be by simply importing observer from a mobx-react package and wrapping it to a counter component. ![]() So to make the component re-render when the mobx state is changed, we would need to make every component as observers. With this, we know how to create a state, let’s see how can we modify it.1 Here, we are creating two functions `incCount` and `decCount` which will be used to increment and decrement the count property respectively.2.Then we make two buttons labeled `Add` and `Dec`.They will have onClick event handler which will trigger `incCount` and `decCount` methods on button clicks. If you click on any of these two buttons you will see that the component state doesn’t change(i.e the number doesn’t change). In the browser, you will see zero counts on screen. Core concepts in Mobx First, we are going to learn about observer and observable.I have opened a react-mobx-app project in VSCode as you can see hereIn `scripts` object, there is a start script which you can run by typing yarn run start in the command line to start the development server.In Index.js file, let’s create our first mobx stateIn above code, we are importing `observable` from `mobx` package which gives us the ability to create a `state`.We then, simply pass an object to an observable function which gives us Mobx state (observable object) we can use it to pass to any component we want.Here, I have simply created a sample Counter component which accepts `appState` as props and renders `count` property on it.Finally, we are rendering counter component to the screen and also passing `appState` as props to `Counter` component. ![]() So let’s dive deeper into Mobx and understand its core concepts. CRA allows you to setup React projects without having to do Webpack and Babel configurations but in CRA we cannot use Decorators, so we are going to use Custom React Script which allows us to use Decorators in CRA.First, let’s install create-react-app you can do that by running the commandnpm install -g create-react-appĪfter that, We are going to run below command where we have used custom-react-scripts flag which allows us to use Decorators, SAAS and LESS in our project you can learn more about this project herecreate-react-app react-mobx-app - scripts-version custom-react-scriptshere react-mobx-app is a name of our project.Then, we will install two libraries mobx and mobx-react(mobx binding for React) by using either of following two commandsyarn add mobx mobx-react or npm install mobx mobx-react.You might be thinking, why do we need mobx in the first place? Doesn’t React have its own state management?Well, it does, but there are few problems with it.It’s not possible to share states with other components using Default React State Management.With too many states, it becomes very difficult to maintain them in long run.You might have heard of ‘props drilling’ issue i.e if you want to pass states from parent component to its deeply nested child component, it becomes very difficult to manage all the props since we need to pass props to all components that come in between parent and child components.These can be solved using Mobx. By Shoaib Bhimani In this tutorial, we are going to learn about Mobx which is an easier and simpler alternative to Redux (at least in my opinion).For this tutorial, we are going to use custom react script which is very similar to Create React App(CRA).
0 Comments
Leave a Reply. |