👨‍👩‍👦‍👦 🍽️ 🐻 アプリケーション状態マネージャーとしてのLensJS 😽 💋 🕵️

Lens-jsライブラリの概要と猫を使った実験。

実際、データは将来のアプリケーションまたはスタンドアロンライブラリの重要な部分です。それらの構造、完全性、およびそれらの保管と処理を整理するためのアプローチは重要です。率直に言って、このタスクは、特に企業プロジェクトの規模では簡単ではありません。1つの解決策は、状態マネージャーを使用することです。そのうちの1つについてはここで説明します。

レンズ

では、レンズとは何ですか？答える最も簡単な方法は論文です-レンズは次のとおりです。

データを使用して作業を整理する原則。データは、1つの大きな有向グラフ内の個々のノードによって量子化されます。
アグリゲーター（リデューサー）。関数型パラダイムのすべてのルールに従って、すべての個々のクォンタムをアセンブルします。
各クォンタムのデータへのアクセスを提供するインターフェース。
そして最後に、レンズはアプリケーションのデータの整合性と関連性を保証します。

ここで、実装についてはまだ話していません。Lensは、ReduxやMobXなどにすでにうんざりしている人や、人気のある状態管理者を使用するのが難しい特定のモジュールを開発している人にとっては、おとぎ話です。多くのレンズの実装があります。それらすべてを試してみてください！

それはどのように機能しますか？

, - . . ! ! …

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();
    }
);

? , "".

, lens

, . , "".

, . ? , 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 , , , . …

, ? . . - — .

! :

;
;
イベントドリブンルーチンを整理します。
状態管理への他のアプローチと連携するための抽象化を作成します。

アプリケーション状態マネージャーとしてのLensJS

レンズ

それはどのように機能しますか？

- ?

リンク

More articles: