Lens JS en tant que gestionnaire d'état d'application

Présentation de la bibliothèque Lens-js et expériences avec des chats.

Les données sont, en fait, une partie importante de votre future application ou bibliothèque autonome. Leur structure, leur intégrité ainsi que les méthodes d'organisation de leur stockage et de leur traitement sont importantes. La tâche, franchement, n'est pas anodine, surtout à l'échelle des projets d'entreprise. Une solution consiste à utiliser un gestionnaire d'état, dont l'un sera discuté ici.

Lentilles

Alors, que sont les lentilles? La façon la plus simple de répondre est la thèse - les lentilles sont:

• le principe de l'organisation du travail avec des données, où elles sont quantifiées par des nœuds individuels dans un grand graphe orienté;

  
  
  
  
  

• agrégateur (réducteur), qui assemble tous les quanta individuels selon toutes les règles du paradigme fonctionnel;

  
  
  
  
  

• une interface qui donne accès aux données de chaque quantum;

  
  
  
  
  

• et enfin, l'objectif garantit l'intégrité et la pertinence des données dans votre application.

  
  
  
  
  

Il convient de noter ici que nous ne parlons pas encore de mise en œuvre. Lens est un bon conte de fées pour ceux qui sont déjà fatigués de Redux, MobX, etc., ou qui développent un module spécifique où il est problématique d'utiliser des gestionnaires d'état populaires. Il existe de nombreuses implémentations d'objectifs. Essayez-les tous!

Comment ça fonctionne?

, - . . ! ! …

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

, ? . . - — .

! :

• ;

  
  
  
  
  

• ;

  
  
  
  
  

• organiser des routines événementielles;

  
  
  
  
  

• créer des abstractions pour travailler avec d'autres approches de la gestion de l'État.

  
  
  
  
  

Liens

1. Wiki sur le lens-js

   
   
   
   
   

2. Projet avec des chats sur lens-js

   
   
   
   
   

3. Paquet react-lens sur npm

   
   
   
   
   

4. Paquet lens-ts sur npm

   
   
   
   
   

5. Paquet lens-js sur npm

   
   
   
   
   

6. Article sur les autres objectifs

   
   
   
   
   

7. Un autre article intéressant sur les lentilles