Mobx + React: Краткое руководство

Mobx - это глобальное хранилище состояний, которое часто используется в качестве замены Redux из-за его менее крутой кривой обучения. Это связано с тем, что он использует объектно-ориентированный подход к управлению состоянием (по сравнению с функциональным для Redux) и имеет меньше шаблонов. Это руководство предназначено для демонстрации абсолютного минимума для начала работы с Mobx. Более подробную информацию можно найти в документации Mobx.

Установите Mobx и mobx-react

Для начала нам нужно установить Mobx и mobx-react

npm install mobx --save
npm install mobx-react --save

Добавить поддержку декоратора

Mobx использует множество функций высшего порядка для украшения функций и свойств класса. В результате Mobx проще использовать с новым синтаксисом декоратора ES2016. К сожалению, по умолчанию Babel не выполняет транспиляцию декораторов, поэтому нужен плагин.

Установите плагин

npm install --save-dev babel-plugin-transform-decorators-legacy

Затем добавьте его в свой .babelrc

{
    "plugins": ["transform-decorators-legacy"]
}

Создание государственного магазина

В Mobx состояние хранится в обычном классе со свойствами, которые хранят состояние, и функциями, которые манипулируют или раскрывают это состояние. Например, хранилище состояний Mobx для приложения Todo может выглядеть так:

import { observable, computed, action } from "mobx";
class TaskStore {
   @observable tasks = [];
   @action.bound 
   addTask(item) {
     this.tasks.push(item)
   }
   @computed get totalTasks() {
     return this.tasks.length;
   }
}

Декораторы делают магазин Mobx реактивным при изменении состояния.

Как показано выше, для магазина Mobx есть 3 основных декоратора.

`@observable`

Украшает свойства и позволяет отслеживать изменения состояния свойства.

`@action`

Должен использоваться для любой функции, которая изменяет состояние или имеет побочные эффекты, и позволяет хранилищу оптимизировать изменения состояния, а также помогает организовать код.

`@computed`

Украшает функции, возвращающие значения, рассчитанные из внутреннего состояния.

Подключиться к магазину

Для начала нам нужно сделать наш магазин доступным для всех компонентов.

import { Provider } from "mobx-react";
import {TableStore} from './TableStore'
const App = () => (
    <Provider todoStore={new TodoStore()}>
        <TodoDisplay />
    </Provider>
)

Теперь любой компонент может подключиться к магазину вот так

import {observer, inject} from 'mobx-react';
@inject('todoStore') @observer
const TodoDisplay = (props) => {
    const onClick = () => {props.todoStore.addTask('Do chores')}
    return(
      <div>
        <div>Number of tasks {props.todoStore.totalTasks}</div>
        {  props.todoStore.tasks.map((item) => 
            (<div>{item}</div>)
          )
        }
      ...      
     </div> 
   );
}

Вот и все! Теперь вы можете использовать Mobx.

Mobx + React: Краткое руководство