В этой истории мы создаем простое приложение с использованием Mobx и React. Мы рассмотрим, как Mobx может упростить обновление в нескольких местах, а также как его можно использовать для внедрения зависимостей.
Давайте создадим приложение React с помощью CRA, используя npm в качестве диспетчера пакетов:
npx create-react-app todoapp --template typescript --use-npm
Установить Mobx
npm i mobx mobx-react mobx-utils
Мы будем создавать простое приложение ToDo для этой истории.
Mobx - это библиотека управления состоянием, которая делает управление состоянием простым, масштабируемым и прозрачным. Mobx предоставляет механизм для синхронизации состояния приложения и компонента React по мере необходимости.
Mobx определяет, есть ли обновления в состоянии приложения, добавляя возможность Observable. По мере создания приложения мы можем больше узнать об этом. Образец кода для этого примера доступен на GitHub - ChiragRupani / MobxToDoAppDemo
Есть 3 важных шага:
- Создать магазин ToDo
- Инициализировать Store и сделать его доступным для любых дочерних компонентов с помощью компонента Provider.
- Доступ к магазину с помощью «Inject» и дополнительных свойств
Сборка магазина
Создадим ToDoStore, добавим файл ToDoStore.ts
ToDoModel
Мы пометили ToDos данных состояния с помощью декоратора @observable, это позволяет Mobx отслеживать любые изменения в состоянии. Чтобы включить поддержку декоратора в TypeScript, установите experimentalDecoratorsto true in CompilerOptions файла tsconfig.json. Состояние может быть любой структурой данных, такой как массивы, JS-карта, объекты и т. Д.
В этом примере мы создали пример серверного приложения с использованием .NET 5.0, код для этого находится на GitHub - ChiragRupani / MobxToDoAppDemo. Хотя вы можете написать свой образец, который вернет список ToDos.
Мы определили init метод, который загрузит все задачи с сервера. Мы украсили метод действием, действия - это все, что изменяет состояние. В случае привязки к действию Mobx сделает this в методе привязанным к классу. Использование действий является обязательным, когда мы вносим изменения в состояние, принудительные действия, которые мы настроили наверху, обеспечивает то же самое.
Обертка / декоратор action влияет только на выполняемую в данный момент функцию, но не на функции, запланированные из нее. Это означает, что любые обратные вызовы в конструкторах setTimeOut, Promises then и async также должны быть включены в действие. По этой причине мы создали отдельную функцию addToDoToStore. Обратите внимание, мы обновляем / изменяем состояние ToDos. Вы можете использовать runInAction или flow, если не хотите использовать отдельные функции обратного вызова. Для этого обратитесь к разделу Написание асинхронных действий. Также логика для вызова API должна быть помещена в отдельный ToDoService, но для простоты мы встроили в сам магазин.
Инициализация и компонент поставщика
Мы должны инициализировать и предоставить хранилище в компоненте верхнего уровня, в этом примере мы делаем в App.tsx
Мы создали объект ToDoStore, как и любой экземпляр класса в конструкторе TypeScript. Однако в componentDidMount методе жизненного цикла мы вызвали init для получения задач. Пакет mobx-react предоставляет компонент Provider для передачи хранилищ с использованием механизма контекста React. Мы можем передать несколько магазинов, используя разные атрибуты. В этом примере ToDoStore будет доступен в ToDoComponent и ToDoSummary и их дочерних элементах, где бы мы ни внедрили магазин, который мы рассмотрим на следующем шаге.
Внедрение магазина и наблюдение за изменениями состояния
Давайте создадим компонент ToDoSummary React
inject соединяет список названий магазинов с этими магазинами, которые будут доступны в качестве свойств. Имена должны совпадать с именем, указанным в Provider
Мы объявили необязательный ToDoStore в качестве реквизита. Отметив его как необязательный, компонент ToDoSummary можно использовать где угодно, не требуя передачи значения для свойств ToDoStore, в то время как хранилище будет доступно во время выполнения Mobx. Мы можем получить доступ к состоянию как к обычному массиву / объектам JS из магазина.
Мы добавили в компонент @observer декоратор. Теперь Mobx будет автоматически обновлять представление при изменении состояния в магазине. Точно так же его можно добавить в ToDoComponent
Теперь, когда добавляется новый ToDo, и ToDoList, и ToDoSummary отражают обновления, обновления выполняются Mobx. Для стилизации мы использовали reactstrap - версию bootstrap.
И последнее, но не менее важное: компонент тестирования, введенный с помощью store. Просто передайте новый экземпляр хранилища в качестве реквизита, чтобы удалить зависимость от HTTP-вызовов, перемещение этой логики в отдельный сервис позволяет имитировать его.
Спасибо за внимание!
