Управляющее состояние с MOBX

Автор оригинала: Susan Adelokiki.

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

Что такое MobX?

MobX – это просто государственная библиотека управления.

Основная проблема, связанная с приложениями по созданию одиночных страниц, необходимо справиться с изменениями данных со временем (особенно в приложении клиента-сервера) и повторное рендеринг на основе этих изменений.

Вот поставляется государственное управление …

Государственное управление в основном означает управление состоянием приложения или данных, представленных пользователю в любой момент времени.

Чтобы правильно управлять состоянием, очень важно иметь возможность отслеживать:

• Независимо от того, меняются ли государство.
• Какое состояние было до изменения.
• Может ли состояние снова измениться

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

Почему mobx?

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

• Это очень просто использовать и, следовательно, значительно ускоряет развитие.
• С Mobx вам не нужно нормализовать ваши данные.
• Изменение состояния очень прост. Вы просто пишете свои намерения и MobX обрабатывает остальные.
• MOBX автоматически отслеживает изменения между состояниями и производными. Как разработчик, вы можете забыть, что изменение некоторых данных повлияет на, казалось бы, не связанный составляющий, но MOBX не делает.

Основные концепции Mobx

• Наблюдаемое состояние

  Наблюдаемые возможности добавляются в структуры данных, массивы или экземпляры классов с использованием наблюдаемый декоратор.

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

• Вычисленные значения

  Они являются ценностями, полученными из штата. Использование вычисляется Декоратор определяет значения, которые будут выведены автоматически при изменении соответствующих данных.

  Здесь Незакрещенные работы обновляется автоматически, когда тренировка добавляется или когда любой Завершено Собственность модифицирована.

• Реакции

  Реакции создают побочный эффект вместо того, чтобы создать новый выход (как случай вычисленных значений), когда происходит новое изменение. Вы можете сделать ваши компоненты без гражданства реагировать, добавив функцию наблюдателя/декоратор из MobX-React упаковка.

  Компоненты реагирования превращаются в производные данные, которые они представляют с наблюдатель Отказ MOBX гарантирует, что компоненты повторно отображаются при необходимости.

• Действия

  Любой кусок кода, который пытается изменить состояние, является действием. Это принимает функцию и возвращает функцию. Функции, которые выполняют поиск, фильтры и т. Д., Не должны быть помечены как действия. Действия должны использоваться только на функциях, которые изменяют состояние. Действия обычно отмечены декоратором @action.

Краткое руководство

Давайте настроим быстродействующее приложение с реагированием под названием «FriendList с MOBX».

• Начнем с настройки проекта React

• Беги Пряжа начать и просмотреть приложение, как показано:

• Теперь, чтобы использовать декораторы, нам нужно изменить конфигурацию приложения React App, поэтому, прежде всего, мы запускаем:

Это в основном перемещает зависимости сборки в наш проект и позволяет настроить.

• Далее мы бежим:

  Перейти к Package.json , ищите Бабел Раздел и добавьте плагин «Преобразование-декораторы».

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

• Далее мы устанавливаем MobX-React и MobX :

Теперь, когда у нас есть MOBX, давайте иметь некоторое содержание:

• Перейти к SRC папка и создать магазины папка. В Mobx мы можем иметь разные магазины, которые обрабатывают состояние для одного куска приложения. Для этой демонстрации мы бы создали один магазин под названием Дружба Отказ

• Далее мы хотим заполнить наш магазин:

  • Импорт наблюдаемый , Действие и вычисляется от MobX Отказ
  • Создайте класс под названием «Дружба», состоит из недвижимости, называемой друзья , что является наблюдаемым (вещами, которые мы хотим отслеживать).
  • Мы создаем действие под названием Добавлена подруги Отказ
  • Наконец, создайте вычисленное свойство, называемое дружнее, которая возвращает количество друзей.

• Далее мы идем в index.js файл:

  • Импорт Провайдер от MobX Отказ
  • Оберните компонент приложения с провайдером, затем сделайте Корень Констанция создана, которая содержит провайдер и приложение.
  • Импортируйте дружеское существо и пройдите как реквизит к провайдеру.

Наконец, время, чтобы показать что-то пользователю!

Мы хотим иметь поле ввода, чтобы добавить друга и список, чтобы показать, что друзья добавлены:

• Перейти к App.js Отказ
• Мы импортируем вставлять и наблюдатель от MobX-React Отказ
• С декораторами (ввод и наблюдатель), мы вводим Дружба В приложении и составьте компонент наблюдателя (который в основном наблюдает за магазином для при изменении данных).
• Мы создаем форму для ввода и отправки друга.

и вуаля ..

Я надеюсь, что это было полезно для того, чтобы выставить вас на скорость с MOBX. Не стесняйтесь задавать вопросы в разделе комментариев.