Начало работы с MobX

JavaScript MobX
Начало работы с MobX

В этой статье делается попытка объяснить, как работает MobX. Мы создадим небольшой кейс с MobX. Если вы ищете надежную документацию по MobX, вы можете перейти наофициальная документация.

Что такое Mobx.

Пояснение из официальной документации: лаконичное, легко расширяемое управление состоянием. Короче говоря, MobX может очень хорошо управлять состоянием/данными приложения, будучи лаконичным и легко расширяемым. Сначала посмотрите на картинку:

mobx-diagram

Мы создаем простое приложение, используя шаги, показанные на рисунке выше.

State

mobx-store

В MobX вы можете установить одно или несколько состояний, давайте сначала установим одно:

var store = mobx.observable({
    counter: 0
})

Инициализируем хранилище только одними данными о состоянииcounter. Ваш объект может иметь несколько иерархий, соответствующих нескольким различным свойствам.

Rendering

mobx-render

MobX отлично работает с react.js, но работает и без него. Мы используем собственный JavaScript для отображения состояния на странице:

`<div>-</div>`


function render(state) {
    document.getElementById('counter').textContent = state.counter;
}

Мы получили статус и обновили страницу.

Actions

mobx-action

Когда происходит действие, мы можем напрямую изменить состояние:

<button id="button">Increment</button>

document.getElementById('button').addEventListener('click', function() {
    store.counter = store.counter + 1
})

Когда мы нажмем кнопку, счетчик в состоянии будет увеличен на 1.

изменить состояние

Когда мы меняем состояние, мы обновляем рендеринг:

mobx.observe(store, function() {
    render(store)
})

окончательный код

jsfiddle

// html
<button id="button">Increment</button>

// JavaScript
var store = mobx.observable({
    counter: 0
})

function render(state) {
    document.getElementById('counter').textContent = state.counter;
}

document.getElementById('button').addEventListener('click', function() {
    store.counter = store.counter + 1
})

mobx.observe(store, function() {
    render(store)
})

Сравните с Redux

По сравнению с Redux, MobX кажется намного проще в написании и понимании, и вам не нужно писать много повторяющегося кода. Но цена, которая приходит с этим, заключается в том, что вы не знаете, как это работает внутри. MobX также можно написать так же, как Redux: использовать действия, создавать действия, создавать асинхронные действия и т. д., но это не обязательно. В целом, MobX — хороший выбор, если вы поддерживаете модульность кода, возможность тестирования и однонаправленный поток данных.

> Оригинал: https://bumbu.github.io/simple-mobx/

Категории