Использование магазина с Lit-элементами
Мне было интересно, почему так сложно найти и использовать любой магазин с светом. Конечно, главными подозреваемыми являются редукс и юнистор. Они хороши, и есть несколько хороших статей о том, как использовать их с lit, но, честно говоря, я чувствовал себя подавленным, используя их.
Если вы знаете lit, который мы широко используем в GotoResolve, вы знаете, что это простая библиотека, которая помогает вам писать веб-компоненты без особого шаблона.
В любом случае, если вы хотите использовать магазин, вы должны подписаться на изменения состояния и если вам нужно, чтобы пользовательский интерфейс был повторно отрендерен. , вы также должны зарегистрировать свойства. В этот момент вы только начали писать ненужную часть кода, которая могла доставить массу неприятностей.
Попытался придумать, как все описать в геттере свойств. Это было бы так удобно и полезно, и это улучшило бы читабельность.
Еще одна моя претензия к Redux — это создание действий, которые описывают, что делать, и редюсеров, которые знают, как это делать, не говоря уже о том, чтобы выяснить, как использовать асинхронные действия. Решение заключается в добавлении промежуточного программного обеспечения… Что может быть проще? Ох уж эти могущественные промежуточные программы...
Через некоторое время мне захотелось написать еще одну JavaScript-библиотеку, которая создает хранилище и управляет им, выполняет всю магию и сводит шаблонный код к минимуму. Через пару дней работы родился новый магазин. Ура! Давайте посмотрим, как его использовать, установим зависимость с yarn или npm:
yarn add lit-element-simple-context
Затем создайте магазин:
Это было так же просто, как и в любой другой библиотеке. Теперь, когда у нас есть хранилище, было бы неплохо извлечь из него некоторые значения в наших компонентах. Сначала мы подключаем наш элемент к хранилищу и определяем, какие свойства нас интересуют.
Подключение хранилища к компоненту — это один вызов метода в части определения пользовательского элемента. Это примесь, которая добавляет в класс некоторые дополнительные элементы и регистрирует наш компонент в хранилище. А вот и моя любимая часть, подписка на свойства хранилища в геттере properties только с одним дополнительным атрибутом (или двумя, если мы хотим переименовать его). fromContext: true сообщает библиотеке, что мы ищем эту переменную в хранилище с точно таким же именем. При необходимости мы можем переименовать его с помощью атрибута conextKey: string. Вот и все! Мы просто подписались на изменения. Если нас интересует, какие значения поступают из хранилища, вместо того, чтобы исследовать селекторы или mapState, нам просто нужно проверить наш геттер properties.
Остальные части весьма скептически относятся к тому, стоит ли писать действия, редукторы и селекторы отдельно. Я думаю, что в большинстве случаев это увеличивает сложность кода, поэтому в моей библиотеке есть только «действие» 2-в-1, которое определяет, как помещать данные в хранилище.
Первый параметр — это текущее состояние, которое вводится автоматически, остальные параметры берутся из вызова.
Вот оно! Еще одна магазинная библиотека.
Я просто хочу подчеркнуть, что это только мое мнение о том, как простой магазин должен работать с освещением. Каждый комментарий и запрос на вытягивание приветствуются.
Вы можете проверить это здесь: https://www.npmjs.com/package/lit-element-simple-context
Вы можете внести свой вклад здесь: https://github.com/icsaba/lit-element-context
