Ringkasan perpustakaan Lens-js dan eksperimen dengan kucing.
Faktanya, data adalah bagian penting dari aplikasi masa depan atau perpustakaan mandiri Anda. Struktur, integritas, serta pendekatan untuk mengatur penyimpanan dan pemrosesannya penting. Tugasnya, sejujurnya, tidak sepele, terutama dalam skala proyek perusahaan. Salah satu solusinya adalah dengan menggunakan pengelola negara, salah satunya akan dibahas di sini.
Lensa
Jadi, apa Lensa itu? Cara termudah untuk menjawabnya adalah tesis - lensa adalah:
prinsip pengorganisasian pekerjaan dengan data, di mana mereka dikuantisasi oleh node individu dalam satu grafik terarah yang besar;
agregator (peredam), yang mengumpulkan semua kuanta individu sesuai dengan semua aturan paradigma fungsional;
antarmuka yang menyediakan akses ke data setiap kuantum;
dan terakhir, lensa memastikan integritas dan relevansi data dalam aplikasi Anda.
Perlu dicatat di sini bahwa kami belum membicarakan tentang implementasi apa pun. Lens adalah dongeng yang bagus bagi mereka yang sudah bosan dengan Redux, MobX, dll., Atau sedang mengembangkan modul khusus yang bermasalah untuk menggunakan manajer negara populer. Ada banyak implementasi lensa. Coba semuanya!
Bagaimana cara kerjanya?
, - . . ! ! …
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 , , , . …
, ? . . - — .
! :
;
;
mengatur rutinitas yang digerakkan oleh acara;
membuat abstraksi untuk bekerja dengan pendekatan lain untuk manajemen negara.