Введение в мобкс

MobX — это простая, масштабируемая и автономная библиотека управления состоянием, которая соответствует реализации функционального реактивного программирования (FRP) и предотвращает несогласованное состояние, гарантируя, что все производные выполняются автоматически. Согласно MobX, это снова упрощает управление состоянием, решая основную проблему: делает невозможным создание несогласованного состояния.

MobX является автономным и не зависит от какой-либо внешней библиотеки или фреймворка для работы. Существуют реализации MobX в популярных интерфейсных фреймворках, таких как React, Vue и Angular.

Создать новый проект

Предпосылки

Узел
Реакция

1. Создайте реагирующее приложение, используя

npx create-react-app mobx-tutorial

Приступим к творчеству 🚀.

2. Установите Mobx и Mobx-React

npm install mobx mobx-react
	or
yarn add mobx mobx-react

📖 Давайте попробуем пример приложения для подсчета обновлений.

1. Создайте функцию для обновления счетчика.

store/actions/counter.js
export const counter =(value , countValue)=> value+countValue

2. Создайте файл Store с объектом начального состояния для хранения значения счетчика.

Для начала мы создадим базовое представление Store, используя class, которое включает count в качестве свойств экземпляра и инициализируется значением 0.
Чтобы обновить счетчик, мы создадим функцию updateCount. Который вызовет функцию встречного действия и назначит возвращаемое значение для подсчета в магазине.
Магазин MobX должен быть реактивным и, следовательно, реагировать на изменения. Мы можем добиться этого, реализуя функцию makeObservable, предоставляемую MobX. Функция makeObservable превращает класс в наблюдаемое состояние, которое обновляется и обновляется всякий раз, когда изменяются части его полей.

store/index.js
import { makeAutoObservable } from "mobx";
import { counter } from "./actions/counter";
class Store {
 count = 0;
 constructor() {
 makeAutoObservable(this);
 }
 updateCount(value) {
 this.count = counter(this.count,value);
 }
}
const store = new Store();
export default store;

3. Оборачиваем компонент приложения наблюдателем.

Импортируйте хранилище, чтобы получить доступ к переменной хранилища (count) и функции хранилища updateCount.
Обернув компонент наблюдателем, он теперь будет автоматически узнавать об изменениях в хранилище.

Observer: функция (и декоратор), которая преобразует определение компонента React, класс компонента React или автономную функцию рендеринга в реактивный компонент. Преобразованный компонент будет отслеживать, какие наблюдаемые объекты используются по его эффективности render, и автоматическиперерисовывать компонент при изменении одного из этих значений.

app.js
import { observer } from "mobx-react";
import store from "./store";
function App() {
  return (
   <div className="App">     
    <header className="App-header">
     <img src={logo} className="App-logo" alt="logo" /> 
      <div className="flex-center flex-column">
        <button className="btn" onClick={()=>store.updateCount(1)}>
         Increment 
        </button>
        <span>{store.count}</span>
        <button className="btn" onClick={()=>store.updateCount(-1)}>
         Decrement
        </button>
      </div>
    </header>
   </div>);
 }
export default observer(App);

Вывод приложения

Структура проекта

Ссылка на Github: https://github.com/yogeshwaran-ramesh/mobx-tutorial

Введение в мобкс