Обновление: 6 января 2021 г. Corvid сменил название на Velo.
В этой статье мы объясняем, как управлять состоянием в Velo с помощью легкого и надежного решения: Storeon, диспетчера состояний на основе событий.
Мотивация
В статье Государственное управление в Corvid Шахар Талми поднимает вопрос об управлении состояниями приложений в Velo. Если вы не знакомы с Velo, это платформа разработки, работающая на Wix, которая позволяет быстро и легко разрабатывать веб-приложения.
Точно контролировать состояние любого приложения - действительно большая проблема. Если у вас много зависимостей компонентов или вам нужно обрабатывать постоянное взаимодействие с пользователем, вы немного пострадаете, когда захотите в конечном итоге добавить новую функцию или масштабировать свое приложение.
В этой статье я делюсь своим решением - очень крошечной библиотекой под названием Storeon (всего 180 байт) с простым интерфейсом. Итак, я написал обертку для интеграции с Velo. В итоге у нас есть менеджер состояний storeon-velo, а это меньше 90 строк кода.
Как это работает
Мы создадим традиционное учебное приложение со счетчиками. Я буду использовать два счетчика, чтобы улучшить демонстрацию.
Для начала нам нужно установить библиотеку из Диспетчера пакетов.
и создайте еще один файл для инициализации магазина в общей папке.
public └── store.js
Мы напишем нашу бизнес-логику в public/store.js
.
Состояние Storeon всегда является объектом; это не может быть ничего другого. Это небольшое ограничение и не слишком важно для нас, но мы должны помнить об этом.
public / store.js
Итак, мы создали хранилище в общей папке и экспортировали оттуда четырьмя методами. Во второй части мы создадим наш UI и напишем логику для изменения состояния.
Давайте добавим два текстовых элемента для отображения значения нашего счетчика и четыре кнопки для увеличения / уменьшения события.
Конечно, мы должны импортировать методы магазина из общедоступного файла в код страницы.
import { dispatch, connect, connectPage } from "public/store";
С connect("key", callback)
мы можем подписаться на любые свойства магазина, и функция обратного вызова будет запускаться при загрузке страницы и каждый раз, когда указанное свойство изменяется.
connectPage(callback)
- это оболочка вокруг $w.onReady(callback)
. С dispatch(event, [data])
мы будем излучать события.
Код страницы
Модули
Функция createStore(modules)
принимает список модулей. Мы можем создавать различные функции для разделения бизнес-логики в нашем приложении. Давайте посмотрим на несколько примеров:
Синхронизация состояния приложения с wix-storage
API памяти:
Отслеживание события с помощью внешних инструментов аналитики с wixWindow.trackEvent()
:
Комбинирование модулей
const store = createStore([ coutnerModule, memoryModule, trackEventModule, ]);
Вывод
Как видите, мы смогли быстро реализовать наше решение для управления состоянием с минимальным объемом кода. Конечно, благодаря привязке данных в Velo вам обычно не нужно беспокоиться об управлении состоянием. Однако в более сложных приложениях проблема может стать более сложной, и управление состоянием станет более сложным.
Управление состоянием может быть сложной проблемой, но Storeon предлагает простое, но надежное решение. Кроме того, Velo позволяет нам быстро реализовать это в нашем приложении, уделяя при этом внимание коду и не тратить время на решение других проблем.
Ресурсы
- Storeon
- Storeon на GitHub
- Storeon Velo на GitHub
- Обсуждение на Velo Forum
- Эта статья в моем блоге
- Эта статья на dzone.com
ДЕМО
- "Сайт"
- Открыть в редакторе
Также
- Государственное управление в Корвиде Шахара Талми.