мотивация
В статье «Управление государством в Corvid» Шахар Талми поднимает вопрос об управлении состояниями приложений в Corvid. Если вы не знакомы с Corvid , это платформа разработки, работающая на Wix, которая позволяет быстро и легко разрабатывать веб-приложения.
Точный контроль состояния любого приложения — это действительно большая проблема. Если у вас много зависимостей компонентов или вам необходимо обрабатывать постоянные взаимодействия с пользователем, вы будете немного страдать, когда захотите в конечном итоге добавить новую функцию или масштабировать свое приложение.
В этой статье я поделюсь своим решением — очень маленькой библиотекой под названием Storeon (всего 175 байт), которая имеет простой интерфейс. Итак, я написал обертку для интеграции с Corvid. В результате у нас есть менеджер состояний corvid-storeon , и он содержит менее 90 строк кода.
Вам также может понравиться:
Угловой учебник: Управление состоянием с NgRx .
Как это работает
Мы создадим традиционное учебное приложение со счетчиками. Я буду использовать два счетчика, чтобы обеспечить лучшую демонстрацию.
Для начала нам нужно установить библиотеку из диспетчера пакетов.
и создайте еще один файл для инициализации хранилища в общей папке.
общественности
Store── store.js
Мы напишем нашу бизнес-логику в public/store.js .
Состояние Storeon всегда является объектом; это не может быть что-либо еще. Это небольшое ограничение и не слишком важно для нас, но мы должны помнить это.
общественные / store.js
JavaScript
1
// The store should be created with createStore() function.
2
// It accepts a list of the modules.
3
import { createStore } from 'corvid-storeon';
4
5
// Each module is just a function,
6
// which will accept a store and bind their event listeners.
7
function counterModule(store) {
8
// @init will be fired in createStore.
9
// The best moment to set an initial state.
10
store.on('@init', () => ({ x: 0, y: 0 }));
11
12
// Reducers returns only changed part of the state
13
// You can dispatch any other events.
14
// Just do not start event names with @.
15
store.on('INCREMENT_X', (state) => ({ x: state.x + 1 }));
16
store.on('DECREMENT_X', (state) => ({ x: state.x - 1 }));
17
18
store.on('INCREMENT_Y', (state) => ({ y: state.y + 1 }));
19
store.on('DECREMENT_Y', (state) => ({ y: state.y - 1 }));
20
}
21
22
// createStore() returns 4 methods to work with store
23
export const {
24
getState, // <- will return current state.
25
dispatch, // <- will emit an event with optional data.
26
connect, // <- connect to state by property key.
27
connectPage, // <- wrapper around $w.onReady()
28
} = createStore([counterModule]);
Таким образом, мы создали магазин в публичной папке и экспортируется оттуда с четырьмя методами. Во второй части мы создадим наш пользовательский интерфейс и напишем логику для изменения состояния.
Давайте добавим два текстовых элемента для отображения нашего значения счетчика и четыре кнопки для увеличения / уменьшения события.
Конечно, мы должны импортировать методы хранилища из открытого файла в код страницы.
import { dispatch, connect, connectPage } from 'public/store';
С connect("key", callback), мы можем подписаться на любые свойства магазина, а функция обратного вызова будет запускаться при загрузке страницы и каждый раз , когда перечисленные изменения свойств.
Это connectPage(callback)обертка во всем $w.onReady(callback). С dispatch(event, [data]), мы будем излучать события.
Код страницы
JavaScript
xxxxxxxxxx
1
import { getState, dispatch, connect, connectPage } from 'public/store';
2
3
// Connect to property "x".
4
// The callback function will be run when the page loads ($w.onReady())
5
// and each time when property "x" would change.
6
connect('x', (state) => {
7
console.log('counter X is changed', state);
8
9
$w('#textX').text = String(state.x);
10
});
11
12
// Connect to "y"
13
connect('y', (state) => {
14
console.log('counter Y is changed', state);
15
16
$w('#textY').text = String(state.y);
17
});
18
19
// Wrapper around $w.onReady()
20
// The callback function will be run once.
21
connectPage((state) => {
22
// Here we also have an object with initial state
23
console.log('onReady runs', state);
24
25
// X counter events
26
$w('#buttonIncX').onClick(() => {
27
dispatch('INCREMENT_X');
28
});
29
$w('#buttonDecX').onClick(() => {
30
dispatch('DECREMENT_X');
31
});
32
33
// Y counter events
34
$w('#buttonIncY').onClick(() => {
35
dispatch('INCREMENT_Y');
36
});
37
$w('#buttonDecY').onClick(() => {
38
dispatch('DECREMENT_Y');
39
});
40
});
демонстрация
Модули
Функция, createStore(modules)принимает список модулей. Мы можем создавать различные функции для разделения бизнес-логики на наше приложение. Давайте посмотрим на несколько примеров:
Синхронизация состояния приложения с wix-storage API памяти:
JavaScript
xxxxxxxxxx
1
// https://www.wix.com/corvid/reference/wix-storage.html#memory
2
import { memory } from 'wix-storage';
3
4
export function memoryModule(store) {
5
// @changed will be fired every when event listeners changed the state.
6
// It receives object with state changes.
7
store.on('@changed', (state) => {
8
memory.setItem('key', state);
9
});
10
}
Отслеживание события во внешних аналитических инструментах с помощью wixWindow.trackEvent():
JavaScript
xxxxxxxxxx
1
import wixWindow from 'wix-window';
2
3
export function trackEventModule(store) {
4
// @dispatch will be fired on every `dispatch(event, [data])` call.
5
// It receives an array with the event name and the event’s data.
6
// Can be useful for debugging.
7
store.on('@dispatch', (state, [event, data]) => {
8
if (event !== '@changed' && event !== '@dispatch') {
9
// Sends a tracking event to external analytics tools.
10
wixWindow.trackEvent(event, data);
11
}
12
});
13
}
Объединение модулей:
JavaScript
xxxxxxxxxx
1
const store = createStore([
2
coutnerModule,
3
memoryModule,
4
trackEventModule,
5
]);
Заключение
Как видите, мы смогли быстро внедрить наше решение для управления состоянием с минимальным количеством кода. Конечно, из-за привязки данных в Corvid вам обычно не нужно беспокоиться об управлении состоянием. Однако в более сложных приложениях проблема может стать более сложной, и управление состоянием станет более сложным для решения.
Управление состоянием может быть сложной задачей, но Storeon предлагает простое, но надежное решение. Кроме того, Corvid позволяет нам быстро реализовать это в нашем приложении, уделяя особое внимание коду и не тратя время на решение других вопросов.
Ресурсы
демонстрация
Дальнейшее чтение
- Государственное управление в Корвиде .
- Помощь предприятиям малого и среднего бизнеса в решении проблем с задержкой данных: исследование Corvid by Wix .
- Создание, управление, развертывание и масштабирование вашего следующего веб-проекта с помощью Corvid .
Эта статья первоначально появилась на Medium .