Descripción general de la biblioteca Lens-js y experimentos con gatos.
Los datos son, de hecho, una parte importante de su futura aplicación o biblioteca independiente. Su estructura, integridad, así como los enfoques para organizar su almacenamiento y procesamiento son importantes. La tarea, francamente, no es trivial, especialmente en la escala de proyectos corporativos. Una solución es utilizar un administrador estatal, uno de los cuales se discutirá aquí.
Lentes
Entonces, ¿qué son las lentes? La forma más fácil de responder es la tesis: las lentes son:
el principio de organizar el trabajo con datos, donde se cuantifican por nodos individuales en un gran gráfico dirigido;
agregador (reductor), que ensambla todos los cuantos individuales de acuerdo con todas las reglas del paradigma funcional;
una interfaz que proporciona acceso a los datos de cada cuanto;
y por último, la lente garantiza la integridad y relevancia de los datos en su aplicación.
Cabe señalar aquí que todavía no estamos hablando de ninguna implementación. Lens es un buen cuento de hadas para aquellos que ya están cansados de Redux, MobX, etc., o están desarrollando algún módulo específico donde es problemático usar administradores estatales populares. Hay muchas implementaciones de lentes. ¡Pruébalos todos!
¿Cómo funciona todo?
, - . . ! ! …
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 rutinas impulsadas por eventos;
crear abstracciones para trabajar con otros enfoques de la gestión estatal.