- PVSM.RU - https://www.pvsm.ru -
Обзор библиотеки lens-js [1] и эксперименты с котиками.
Данные — это, в действительности, важная часть Вашего будущего приложения или отдельной библиотеки. Важна их структура, целостность, а также и подходы к организации их хранения и обработки. Задача, прямо скажем, не тривиальна, особенно в масштабах корпоративных проектов. Одно из решений — использование менеджера состояния, об одном из которых, тут пойдёт речь.
И так, что же такое «Линзы»? Проще всего ответить тезисно - линзы это:
принцип организации работы с данными, где те квантуются по отдельным узлам в одном большом направленном графе;
агрегатор (редьюсер), который занимается сборкой всех отдельных квантов по всем правилам функциональной парадигмы;
интерфейс, который обеспечивает доступ к данным каждого кванта;
и последнее, линза обеспечивает целостность данных и их актуальность в Вашем приложении.
Тут вот стоит отметить, что мы ещё не говорим о как-либо реализации. Линза — это хорошая сказка для тех, кто уже устал от Redux, MobX и т. п. или разрабатывает какой-нибудь специфический модуль, где проблематично использовать популярные менеджеры состояний. Реализаций линз — множество. Попробуйте их все!
Чем объяснять на пальцах, гораздо проще сделать это на каком-нибудь примере. Будем экспериментировать на котиках. Не волнуйтесь! Ни один котик не пострадает! Приступим…
Рассмотрим демонстрационное приложение react-lens-cats [2], разработанное на основе линз. В нём используется библиотека — lens-js [1], а также её обёртки для TypeScript и React — lens-ts [3] и react-lens [4].
Займёмся постановкой задачи: Представим, что несколько котиков решили прокатиться на карусели. Нам нужно организовать их очередь и распределить занятые места между ними. Формально — это два массива, между которыми котики будут перемещаться.
Пусть структура данных выглядит следующим образом:
export interface Cat {
name: string;
}
export interface Queue {
cats: Cat[]
}
export interface Store {
street: Queue;
circle: Queue;
}
Давайте создадим наше состояние и объявим линзу в фале lens.ts
import { Lens } from '@vovikilelik/react-ts';
const murzic: Cat = { name: 'Murzic' };
const pushok: Cat = { name: 'Pushok' };
const sedric: Cat = { name: 'Sedric' };
const rizhik: Cat = { name: 'Rizhik' };
const store: {lens: Store} = {
lens: {
street: { cats: [murzic, pushok, sedric, rizhik] },
circle: { cats: [] }
}
};
export const lens = new Lens<Store>(
() => store.lens,
(value, effect) => {
store.lens = value;
effect();
}
);
Пока всё легко и понятно? Но не будем отвлекаться, а то получится как на "матане [5]".
Как можно заметить, мы экспортируем только константу lens
, относительно которой и будем работать с состоянием. Это синглтон [6], "детка".
Будет не так интересно, если мы просто пойдём по приведённому исходному тексту. Давайте попробуем разобраться с самых азов? В качестве эксперимента, создадим Test.tsx
и попробуем получить доступ к свойствам нашего состояния.
import { lens } from './lens';
export Test: React.FC = () => (
<div>
{ lens.go('circle').go('cats').get().map(c => c.name).join(' ') }
{ lens.go('street').go('cats').get().map(c => c.name).join(' ') }
</div>
);
Теперь мы можем видеть имена наших котиков. Выражение выглядит пугающе, но в процессе заполнения можно заметить, что благодаря типизации, имена полей предлагаются средой разработки, что весьма удобно.
Но постойте, судари! У нас тут что-то не так с кодом! И действительно, массивы circle
и street
одинаковы. Выгоднее получить универсальный компонент, который отображает только массив котиков, откуда бы мы его не взяли. А давайте, просто, передавать узел линзы, как параметр компонента, вот так:
import { Lens } from '@vovikilelik/lens-ts';
import { useLens } from '@vovikilelik/react-lens';
import { Cat } from './lens';
export Cats: React.FC = (cats: Lens<Cat[]>) => {
const [catsArray] = useLens(cats);
return (
<div>
{ catsArray.map(c => c.name).join(' ') }
</div>
);
}
Тогда файл Test.tsx
будет выглядеть следующим образом:
import { lens } from './lens';
export Test: React.FC = () => (
<div>
<Cats cats={lens.go('circle').go('cats')} />
<Cats cats={lens.go('street').go('cats')} />
</div>
);
Всё ещё сложно. Для чего мы постоянно обращаемся к корневой линзе? Нам же не так и важно, где хранятся массивы котиков? Давайте сделаем Test.tsx
более универсальным, ну и назовём его как-нибудь подходяще - Lunapark.tsx
:
import { Lens } from '@vovikilelik/lens-ts';
import { Queue } from './lens';
export Lunapark: React.FC = (street: Lens<Queue>, circle: Lens<Queue>) => (
<div>
<Cats cats={street.go('cats')} />
<Cats cats={circle.go('cats')} />
</div>
);
Другое дело. Как ловко мы тут всё инкапсулировали...
Теперь вид компонента упростился. Но смотрите, проявилась одна особенность, таким образом, мы можем создавать целые модели компонентов, которые будут также универсальны, как и рядовые.
И действительно, поскольку каждый узел линзы является объектом, адресующим некие данные в глобальном состоянии, то его передача в качестве аргумента ничем не отличатся от передачи простого значения. Однако в случае линз, мы уже получаем механизм отслеживания изменений в узле по средствам
useLens
.
Теперь дело за малым, переместить котиков из одного массива в другой. Давайте в нашем Lunapark.tsx
создадим кнопку с обработчиком, где мы и завершим нашу задумку.
const popCat = (lens: Lens<Cat[]>): Cat | undefined => {
const cats = lens.get();
const cat = cats.pop();
lens.set(cats);
return cat;
}
const playCat = (lens: Lens<Cat[]>, cat: Cat) => {
lens.set([...lens.get(), cat]);
}
export Lunapark: React.FC = (street: Lens<Queue>, circle: Lens<Queue>) => {
const onCatPlay = useCallback(() => {
const cat = popCat(street.go('cats'));
cat && playCat(circle.go('cats'), cat);
}, [street, circle]);
return (
<div>
<Cats cats={street.go('cats')} />
<Cats cats={circle.go('cats')} />
<button onClick={onCatPlay} />
</div>
);
}
Обратите внимание, что обработка изменений уже реализована внутри линзы по средствам
useLens
, т. е. после изменения данных в узлах cats, связанные компоненты будут обновлены, и внимание, магия — только эти компоненты, что полезно для производительности.
Что же, получилось весьма недурно.
Линзы — это не строго привязанная, к какой-либо технологии, библиотека. Их успешно можно применять там, где не подходят привычные подходы. Например, при создании динамических сцен на BabylonJS [7] или внутреннего состояния Web-компонентов [8] и т. п. Линзы — это не аналог Redux или похожих технологий и, как следствие, могут применяться совместно, как абстракция более низкого уровня. Всё дело в воображении…
Что, уже? Да. Целью статьи было познакомить читателя с ещё одним подходом для организации состояния приложения. Мы рассмотрели самое-самое главное — потенциал к масштабируемости и области применения.
Давайте подытожим! С помощью линз можно:
реализовывать состояние приложения;
разрабатывать общие компоненты и модели;
организовывать событийно-ориентированные подпрограммы;
создавать абстракции для работы с другими подходами к управлению состоянием.
Wiki по lens-js [9]
Автор: Владислав
Источник [12]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/360930
Ссылки в тексте:
[1] lens-js: https://www.npmjs.com/package/@vovikilelik/lens-js
[2] react-lens-cats: http://git.vovikilelik.com/Clu/react-lens-cats
[3] lens-ts: https://www.npmjs.com/package/@vovikilelik/lens-ts
[4] react-lens: https://www.npmjs.com/package/@vovikilelik/react-lens
[5] матане: https://ru.wikipedia.org/wiki/%D0%9C%D0%B0%D1%82%D0%B5%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%B0%D0%BD%D0%B0%D0%BB%D0%B8%D0%B7
[6] синглтон: https://ru.wikipedia.org/wiki/%D0%9E%D0%B4%D0%B8%D0%BD%D0%BE%D1%87%D0%BA%D0%B0_(%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F)
[7] BabylonJS: https://ru.wikipedia.org/wiki/Babylon.js
[8] Web-компонентов: https://developer.mozilla.org/ru/docs/Web/Web_Components
[9] Wiki по lens-js: http://git.vovikilelik.com/Clu/lens-js/wiki
[10] Статья про другие линзы: https://habr.com/ru/post/415035/
[11] Ещё интересный пост про линзы: https://habr.com/ru/post/230649/
[12] Источник: https://habr.com/ru/post/538844/?utm_source=habrahabr&utm_medium=rss&utm_campaign=538844
Нажмите здесь для печати.