OmniAural — это библиотека управления глобальным состоянием javascript, написанная для приложений React/React Native. Основной принцип заключается в том, что компоненты (основанные на классах или функциональные) прослушивают изменения глобального состояния. Эта простая концепция позволяет легко инкапсулировать функциональность без догматизма в архитектурном подходе.
OmniAural состоит из слов Omni и Aural, означающих то, что можно услышать отовсюду, улавливая сущность его универсального характера, который может быть прослушан кем угодно и где угодно внутри кода приложения.
В приведенном выше примере мы зарегистрировались для прослушивания account.name как name, и OmniAural добавляет его в локальное состояние компонента. Каждый раз, когда имя учетной записи изменяется в глобальном состоянии, локальное состояние компонентов также обновляется.
"Подожди... Еще один?"
Рождение идеи OmniAural произошло из-за требований ряда небольших проектов, которым нужно было иметь возможность отображать и обновлять одни и те же данные между их компонентами, но совершенно независимо. Нам нужно было что-то маленькое, быстрое и простое, чтобы хранить данные на месте, пока другие действия могли выполняться на протяжении всего проекта.
Сначала мы провели небольшое исследование того, каким может быть наилучшее существующее решение для глобального менеджера состояний, но, просмотрев ряд решений, ни одно из них не соответствовало нашим потребностям. Некоторые из них были слишком сложны для масштаба проекта, некоторые требовали большого количества шаблонов, которые мы считали ненужными для нашего варианта использования, а некоторые были «просто слишком большими».
После совместных обсуждений и исследований мы решили подойти к управлению состоянием с другой стороны и создать индивидуальное решение, которое соответствовало бы нашим потребностям. Конечно, пока мы проходили эту реализацию, и после множества «знаете, что было бы неплохо?» Мы пришли к простому, надежному и полностью совместимому с React и React Native решению.
Как
В конечном итоге эта библиотека стала инструментом для получения или установки данных в любой момент проекта без необходимости реализации каких-либо конкретных шаблонов или использования чрезмерного шаблонного кода, но по-прежнему следовала шаблонам, узнаваемым разработчиками React/React Native. И хотя это может быть так же просто, как «дать мне значение» или «обновить значение», в конечном итоге это намного больше.
Когда объект состояния OmniAural инициализируется, он передается в структуре JSON, для которой каждое свойство становится свойством синглтона глобального состояния OmniAural. Это позволяет компонентам React регистрировать определенные свойства глобального состояния, и эти свойства автоматически включаются в жизненный цикл компонентов ~ либо как локальное состояние для компонентов с состоянием, либо как свойства компонента для функциональные компоненты без сохранения состояния. Таким образом, когда значение свойства глобального состояния обновляется из любой точки проекта, каждый зарегистрированный компонент уведомляется о необходимости предпринять необходимые шаги, чтобы определить, требуется ли повторная визуализация с новыми обновленными значениями.
Это достигается с помощью двух шаблонов, найденных в информатике. Шаблон KVO (наблюдатель значения ключа), который позволяет объектам регистрироваться и прослушивать изменения свойств других объектов, и шаблон Singleton, в котором экземпляр класса инициализируется только один раз на протяжении всего остального жизненного цикла приложения.
Почему
Преимущество OmniAural заключается в его способности сочетать простоту и удобство. Это сводится к 3 шагам:
- Инициализация: создайте начальную глобальную структуру состояния и инициализируйте ее в точке входа вашего проекта (можно изменить позже, если это необходимо).
- Регистрация: Компоненты регистрируются в свойствах глобального состояния, о которых они хотят получать информацию.
- Установить: Обновите свои свойства по мере необходимости, используя назначенные им установщики, и ваше новое значение будет отправлено зарегистрированным компонентам для повторного рендеринга.
Вот и все. Это хлеб с маслом использования этой библиотеки. Есть масса других функций, о которых я расскажу дальше в этой статье, но пока зачем использовать OmniAural? Потому что он интуитивно понятен, безопасен и прост в использовании.
Основные понятия
Глобальное состояние OmniAural не передается вашим компонентам. При изменении глобального состояния ваши зарегистрированные компоненты будут уведомлены непосредственно об этих изменениях. Это делается через состояние компонента класса или хуки функционального компонента.
Значения глобального состояния недоступны напрямую. Вы должны использовать функции .value() или .set(…) для извлечения или обновления значений состояния. Это создает тип контролируемой изменчивости, которая предотвращает изменение глобального состояния из-за непреднамеренных побочных эффектов.
Отказ от ответственности: Конечно, поскольку мы говорим о javascript, это можно переопределить. Но это не только нарушит концепцию прослушивателя глобального состояния, но также попытается предупредить вас на пути к этому. Если вы хотите обновить значение свойства напрямую, вам придется установить
OmniAural.UnsafeInstance.value.account.value.name.value = “Jake”(что?). Так почему кто-то хочет сделать что-то настолько уродливое, а потом понять, что это не обновит их компоненты? Не знаю, но это выполнимо…
Как упоминалось выше, свойства локального состояния изменяются при изменении глобального состояния. Однако попытка обновить эти свойства с помощью setState приведет к ошибке, поскольку глобальные изменения состояния должны происходить через их установщики состояния OmniAural. Таким образом, компонент не может непреднамеренно изменить глобальное состояние.
Вышеприведенное предполагается для компонентов с состоянием. Тем не менее, OmniAural спроектирован так, чтобы быть совместимым с любым компонентом, который вы решили использовать в своем проекте. Класс, функциональность или сочетание. Вы можете зарегистрировать любой компонент, используя локальное состояние, HOC или хуки.
Ладно, хватит теории. Давайте посмотрим на OmniAural в действии!
Инициализация
Чтобы инициализировать ваше глобальное состояние, в компоненте верхнего уровня (обычно App.js) импортируйте OmniAural и вызовите initGlobalState
После инициализации глобальные свойства состояния могут наблюдаться компонентами с помощью функции register(). Их также можно установить, вызвав функцию .set(...) для самого свойства глобального состояния.
Зарегистрируйте компонент
Рекомендуемый подход к доступу к значениям глобального состояния заключается в регистрации компонента в качестве прослушивателя любых свойств глобального состояния, которые ему необходимо использовать. Вы можете зарегистрироваться для прослушивания определенного свойства или всего объекта глобального состояния. Вы также можете использовать псевдонимы для локального именования, которое имеет больше смысла для вашего компонента.
Обновить глобальное состояние
Используя объект OmniAural.state, вы можете вносить изменения в глобальные значения состояния. Это также вызовет повторную визуализацию всех компонентов, которые прослушивают это конкретное свойство, с новым значением.
Добавление действий
Действия — это удобный способ инкапсулировать изменения глобального состояния. Их можно добавить из любого файла в глобальном пространстве. Действия можно использовать для управления любой глобальной логикой приложения, связанной с состоянием.
Чтобы добавить действие, используйте функцию addAction(), передав имя и определение функции.
Теперь вы можете вызывать действие из OmniAural вместо непосредственного обновления свойства глобального состояния, обеспечивая лучшую инкапсуляцию обновления свойства.
Функциональные компоненты
Если вы предпочитаете использовать функциональные компоненты вместо компонента класса с состоянием, OmniAural предоставляет им несколько способов взаимодействия с глобальным состоянием. Вы можете либо использовать метод компонента высокого порядка и получить свойство из реквизита компонента, либо использовать хук! Оба способа будут повторно отображать компонент при обнаружении изменения значения свойства в любом месте проекта.
//OR
Примечание. useOmniAural() не возвращает установщик так же, как useState(), поскольку все изменения глобального состояния должны использовать установщики глобального состояния.
Вывод
Есть много других функций, не рассмотренных в этой статье, таких как property aliases , useOmniAuralEffect, adding properties и property update callbacks, но все это можно найти в README проекта.
OmniAural не предназначался для замены существующих систем управления глобальными состояниями. Он был создан для удовлетворения потребности и превратился в проект, который может поддерживать полноценную функциональность глобального управления состоянием, независимо от размера проекта. Проект доступен в npm, так что попробуйте сами и расскажите нам, что вы думаете! Чтобы добавить его в свой проект, просто запустите npm install omniaural или yarn add omniaural.
Полное описание API и исходный код этого проекта вы можете найти на github.
