What is Mobx Core?

Tram Ho

Hello, continue to run cronjob to write monthly report, I am back with Mobx and Mobx series in React. In this article, I will give you an overview of the core things currently using Mobx, the things that help you build the Mobx store and how to use them to interact with React UI in a straightforward way. and the simplest. Let’s go!

Mobx core

Observable state

  • Basically, the state of Mobx is no different from React or Redux. The difference as well as the highlight is “under the hood”, Mobx uses a Proxy object mechanism that allows you to directly mutate (change) the state and Mobx will self-check those changes to trigger re render UI.

Actions

  • Similar to other state management, Mobx also uses concept action to represent the functions used to update the value of the state. Simply put, when an event like clicking on a button, changing the value of the input will trigger an action.

Computeds

  • Computeds, returned from the getter function, are often used to calculate or transform data from 1 or more observable state.
  • Computeds will only be re-triggered if 1 of the observable state changes. This is quite similar to React’s useMemo (), which increases performance by not creating too many functional references and avoiding unnecessary re-rendering.
  • Note that in compoteds, side effects or update state should not be done and new state should not be created in computeds.

Reactions

  • One of the powerful weapons to help Mobx become a bright candidate for the position of state management.
  • In the simplest sense, the reaction functions that Mobx provides behave similarly to React’s useEffect ().
  • You can use reaction functions to “observe” any state in the store, thereby implementing the logic based on those changes.
  • However, you should not do API call in reaction function, so useEffect () is still very useful =)).
  • Mobx provides several reaction functions such as:
    • autorun (): Triggered when any state changes.
    • reaction (): Same as autorun () but will take 2 functions as parameters. The first parameter (data function) will be reaction tracked and use the return value of this function for the second parameter (effect function). Only when the data function returns a new data will the effect function be triggered and the effect function will not run immediately upon the init store.
    • when (): when () also takes two functions as an argument. The first parameter (predicate function) is watched by when and this function returns a boolean. If the predicate function returns true, then the second function (effect function) is triggered and only triggers the first time when the predicate returns true.

Implement Mobx in React

Creating a simple Mobx store

  • Mobx’s store is usually initialized with a class (maybe for the future purpose it will convert all current functions, annotations to decorators).
  • In the framework of this article, we will use makeObservable () to declare the components in the store such as:
    • Observable state: tasks.
    • Action: addNewTask () and removeTask ()
    • Computed: totalTask ​​().
    • Reaction: autorun (), reaction () and when ().
  • Here, I will explain more about how the above reactions work:
    • autorun (): Will run when init store and add or remove value during state tasks. On a side note, observable array state is not actually an array type, so if checked with Array.isArray (), it returns fail. How to get the real array in the observable array, you can use the slice () method to autorun to observe this real array. More about observable array you can refer to here .
    • reaction (): Whenever the totalTask ​​getter returns a new value, the console will log the value that this getter returned earlier.
    • when (): Although the predicate function’s condition checks when getter totalTask ​​≥ will run effect function console log to the line of text 3 task reached. However, when only run once, it can be understood that when totalTask ​​returns 3, reaction when () has finished running, don’t do any more runs.
  • On a side note, when declaring 2 actions addNewTask () and removeTask (), I use 1 annotation of the bound action to bind this to these two actions (Mobx and React do not auto bind this for method). If you have coded React since the class based component era, it is quite similar to the constructor of the component executing bind this for the method. If you do not want to call bound, then convert the action to an arrow function as follows:

  • As mentioned above as well as in the previous article, we can see in actions that mutate state tasks directly. For example addNewTask () with Redux when writing explicitly the steps will be as follows:

  • Look, not too much difference because the structure of state tasks is still quite simple. Redux needs to copy the state again before making a change in it. However, when handling nested state, copying state will be very complicated, looking quite a headache …

Reactive React components with Mobx

  • First, we need to pass the above initialized store to components as props. This method can be used for small apps but when there are too many components, it takes quite a while. Hence, it is possible to create a small custom hook to make this easier:

  • The purpose of the useStore hook is to create a context containing Mobx’s store that can then be called in any component. So next, we need to provide context and refactor to pass the store to the component:

  • Implement component components:

  • Use the hook to get the properties and methods of the store. Note, to re-render the component when state changes in TaskList component, you need to use mobx-react’s HOC observer to help Mobx observe this change.
  • With a computed totalTask, it can be called as a normal variable.

Fastening

Above is a very small demo so you can imagine handling state with Mobx in React, a few points to note:

  • If makeObservable () is used and the action is normal functions, then use the annotation bound bind this for the action (computed is no problem).
  • For components that use mobx state, it is necessary to use mobx-react’s HOC observer to help Mobx listen for state changes, thereby trigger re-render component when state changes.
  • Should use the React context all components have access to the store.

In the next article, I will talk about building a structure when you want to create multiple stores and handle API calls in Mobx. If you feel that Mobx is an interesting topic, please give yourself an upvote, comment for us to discuss more and follow our next post.

Demo code: https://codesandbox.io/s/demo-mobx-lj1gz?file=/src/TaskList.js

Happy coding!

References

https://mobx.js.org/README.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Share the news now

Source : Viblo