Visão geral da biblioteca Lens-js e experimentos com gatos.
Os dados são, na verdade, uma parte importante de seu futuro aplicativo ou biblioteca independente. Sua estrutura, integridade, bem como as abordagens para organizar seu armazenamento e processamento são importantes. A tarefa, francamente, não é trivial, especialmente na escala de projetos corporativos. Uma solução é usar um gerente estadual, um dos quais será discutido aqui.
Lentes
Então, quais são as lentes? A maneira mais fácil de responder é a tese - as lentes são:
o princípio de organizar o trabalho com dados, onde eles são quantizados por nós individuais em um grande grafo direcionado;
agregador (redutor), que reúne todos os quanta individuais de acordo com todas as regras do paradigma funcional;
uma interface que fornece acesso aos dados de cada quantum;
e, por último, a lente garante a integridade e relevância dos dados em seu aplicativo.
Deve-se notar aqui que não estamos falando de nenhuma implementação ainda. Lens é um bom conto de fadas para quem já está cansado de Redux, MobX, etc., ou está desenvolvendo algum módulo específico onde é problemático usar gerenciadores de estado populares. Existem muitas implementações de lentes. Experimente todos eles!
Como tudo funciona?
, - . . ! ! …
react-lens-cats, . — lens-js, TypeScript React — lens-ts react-lens.
: , . . — , .
:
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();
}
);
, . ? , 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 Web- . . — Redux , , , . …
, ? . . - — .
! :
;
;
organizar rotinas orientadas a eventos;
crie abstrações para trabalhar com outras abordagens de gerenciamento de estado.