Обновление: 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 позволяет нам быстро реализовать это в нашем приложении, уделяя при этом внимание коду и не тратить время на решение других проблем.

Ресурсы

ДЕМО

Также