Übersicht über die Lens-js- Bibliothek und Experimente mit Katzen.
Daten sind in der Tat ein wichtiger Bestandteil Ihrer zukünftigen Anwendung oder eigenständigen Bibliothek. Ihre Struktur, Integrität sowie die Ansätze zur Organisation ihrer Speicherung und Verarbeitung sind wichtig. Die Aufgabe ist offen gesagt nicht trivial, insbesondere im Hinblick auf Unternehmensprojekte. Eine Lösung besteht darin, einen Zustandsmanager zu verwenden, von dem einer hier erörtert wird.
Linsen
Was sind Objektive? Der einfachste Weg zu antworten ist These - Linsen sind:
das Prinzip der Organisation der Arbeit mit Daten, bei denen sie von einzelnen Knoten in einem großen gerichteten Graphen quantisiert werden;
Aggregator (Reduzierer), der alle einzelnen Quanten nach allen Regeln des Funktionsparadigmas zusammensetzt;
eine Schnittstelle, die den Zugriff auf die Daten jedes Quantums ermöglicht;
Und schließlich stellt das Objektiv die Datenintegrität und -relevanz in Ihrer Anwendung sicher.
Hierbei ist zu beachten, dass es sich noch nicht um eine Implementierung handelt. Lens ist ein gutes Märchen für diejenigen, die Redux, MobX usw. bereits satt haben oder ein bestimmtes Modul entwickeln, bei dem es problematisch ist, beliebte Staatsmanager einzusetzen. Es gibt viele Objektivimplementierungen. Probieren Sie sie alle aus!
Wie funktioniert das alles?
, - . . ! ! …
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 , , , . …
, ? . . - — .
! :
;
;
ereignisgesteuerte Routinen organisieren;
Erstellen Sie Abstraktionen, um mit anderen Ansätzen der staatlichen Verwaltung zu arbeiten.