MobX — Основные идеи и принципы
Концепты
MobX выделяет следующие основные идеи в вашем приложении.
Вы видели их в предыдущем gist,
но давайте рассмотрим их более подробно.
1. State
Стейт (состояние) — это данные, которые управляют вашим приложением.
Обычно это предметно-ориентированные состояния (domain-specific state) вроде списка дел,
и есть стейты представления (view state), как например
выбранный в данный момент элемент.
Запомните, стейт — это как ячейка электронной таблицы, хранящая значение.
2. Derivations
Все, что может быть произведено из стейта без каких-то дальнейших
взаимодействий является производными. Производные существуют во множестве форм:
* Интерфейс пользователя.
* Произведенные данные, вроде числа оставшихся дел в списке.
* Интеграция с сервером, вроде отправки изменений на сервер.
MobX выделяет два типа производных:
* Вычисляемые значения (computed values). Это значения, которые всегда могут быть
произведены из текущего наблюдаемого (observable) стейта используя чистую функцию.
* Реакции (Reactions). Реакции — это побочные эффекты, которые должны случаться
автоматически, если стейт меняется.
Они нужны, как мост между императивным и реактивным программированием.
Или, чтобы стало чуть понятнее, они в конце концов необходимы для достижения ввода/вывода.
Люди, начинающие использовать MobX, как правило, используют реакции слишком часто.
Золотое правило: если вы хотите создать значение на основе текущего стейта, используйте computed.
Возвращаясь к аналогии с электронной таблицей, формулы — это производные,
которые вычисляют значение.
Но для вас, как пользователя, чтобы увидеть их на экране
нужна реакция, которая перерисовывает часть графического интерфейса.
3. Actions
Экшен (действие) — это любой кусочек кода, изменяющий стейт.
События пользователя, отправка данных на сервер, запланированные события, и т.п.
Экшен — это как пользователь, который вводит новое значение в электронную таблицу.
Экшены могут быть четко определены в MobX, чтобы помочь вам более понятно структурировать код.
Если MobX используется в режиме strict mode,
то MobX будет ограничивать любую попытку изменения стейта вне экшенов.
Принципы
MobX поддерживает однонаправленный поток данных,
где действия изменяют состояние, которое в свою очередь, обновляет все
связанные представления (views).
Все Производные (Derivations) автоматически и атомно
(atomically из функционального программирования)
обновляются когда изменяется state.
В результате вы никогда не увидите промежуточные значения.
Все Производные обновляются синхронно по-умолчанию.
Это например означает, что экшены могут безопасно исследовать
вычиляемые значения сразу после изменения стейта.
Вычисляемые значения (Computed values) обновляются лениво. Любое вычисляемое значение,
которое не используется активно не будет обновлено, пока не будет нужды в стороннем
эффекте (ввод/вывод).
Если же представление более не используется, то будет автоматически обнаружена сборщиком мусора.
Все Вычисляемые значения должны быть чистыми функциями.
Они не предназначены для изменения стейта.
Пример
Следующий листинг иллюстрирует описанные выше концепции и принципы:
import { observable, autorun } from "mobx"
var todoStore = observable({
/* некоторое наблюдаемое значение */
todos: [],
/* производное значение */
get completedCount() {
return this.todos.filter(todo => todo.completed).length
}
})
/* функция, наблюдающая за стейтом */
autorun(function() {
console.log("Выполнено %d из %d пунктов", todoStore.completedCount, todoStore.todos.length)
})
/* ..и некоторые экшены, изменяющие стейт */
todoStore.todos[0] = {
title: "Пойти прогуляться",
completed: false
}
// -> Синхронно выведет 'Выполнено 0 из 1 пункта'
todoStore.todos[0].completed = true
// -> Синхронно выведет 'Выполнено 1 из 1 пункта'В 10 минутном введении в MobX и React
вы можете более глубоко ознакомиться с данным примером и построить интерфейс,
используя в нем React.
Эксклюзивно для сайта skv1991.ru
Перепечатка и копирование строго запрещены.