Biscuit-Store - ein weiterer Blick auf die Statusverwaltung in JavaScript-Anwendungen

Grüße meine Damen und Herren! In diesem Artikel werde ich die JavaScript-Bibliothek des Biscuit-Stores vorstellen.

Beschreibung

Biscuit ist ein multifunktionales, flexibles und modulares Tool zum Erstellen und bequemen Arbeiten mit verwalteten Statuscontainern in JavaScript-Anwendungen.

Die Hauptziele des Artikels

• Erzählen Sie von dem Keksladen und seinen Zielen;

  
  
  
  
  

• Vergleich mit anderen ähnlichen Werkzeugen;

  
  
  
  
  

• Geben Sie einen kurzen Überblick über die Funktionalität.

  
  
  
  
  

Hier werde ich nicht unter die Haube tauchen, sondern nur einen kurzen Überblick geben.

Vorteile des Keksladens

• Streben nach Einfachheit der Ausführung;

  
  
  
  
  

• React;

  
  
  
  
  

• ;

  
  
  
  
  

• ;

  
  
  
  
  

• Middleware;

  
  
  
  
  

• ;

  
  
  
  
  

• ;

  
  
  
  
  

• ;

  
  
  
  
  

• .

  
  
  
  
  

• core – 18Kb, Gzip: 6.2 ( CommonJs);

  
  
  
  
  

• react – 6.8, Gzip: 2.0;

  
  
  
  
  

• adapter – 9.6, Gzip: 3.5 ( CommonJs);

  
  
  
  
  

• :

  
  
  
  
  

  • Internet-explorer 11+;

    
    
    
    
    

  • Chrome 48+;

    
    
    
    
    

  • Opera 25+;

    
    
    
    
    

  • Mozilla firefox 40+;

    
    
    
    
    

  • Safari 9+.

    
    
    
    
    

• TypeScript.

  
  
  
  
  

?

, JavaScript state-management, : redux mobx.

Redux

, 2kB js . redux . C redux . .

, , .

,

GitHub , . , , -, . , … - , . Redux-utils , .

.

, 2015, , . 2021 JavaScript. , middleware, redux-saga redux-thunk. : .

Redux … . - -, - reselect, reducers switch – - redux-actions. .

: - .

Redux - , , , .

Mobx

mobx:

“, , . ”.

redux - , , mobx - state-management. : “ , ».

— , , , , . , , … , , .

. , .

Biscuit

biscuit-store - redux mobx. , . , .

, biscuit , .

: « ?», … - , biscuit :

1. ;

   
   
   
   
   

2. , , , ;

   
   
   
   
   

3. , .

   
   
   
   
   

,

, ( ).

redux, , . , Biscuit-store .

import { createStore } from '@biscuit-store/core';

export const { store, actions } = createStore({
  name: 'duck',
  initial: { value: '' },
});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. . , .

, , .

import { createStore } from '@biscuit-store/core';
import { adapter } from './adapter';

export const { store, actions } = createStore({
  name: 'duck',
  initial: { value: '' },
  actions: {
    duckSwim: 'duck/swim',
    duckFly: 'duck/fly',
    duckQuack: 'duck/quack',
  },
  middleware: [adapter]
});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

actions , -, , . .

import { createAdapter } from '@biscuit-store/adapter';
const { action, connect } = createAdapter();

action('duck/swim', () => {
    return { value: 'duck flews' };
});

action('duck/fly', () => {
    return { value: 'duck flews' };
});

action('duck/quack', (payload, state, { send }) => {
    // This is an asynchronous way of transmitting the payload
    send({ value: 'duck quacks' });
});

export const adapter = connect;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Der Adapter ist ein Middleware-Modul, mit dem Sie Logik mit Status verknüpfen können.

Unsere Ente ist bereit, in die große Welt zu gehen.

Lassen Sie uns überprüfen, wozu sie fähig ist.

import { actions, store } from './store/duck'
const { duckQuack } = actions;

store.subscribe((state) => {
    console.log(state.value); // 'duck quacks'
})

duckQuack.dispatch();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Sie können es auch so machen:

import { actions } from './store/duck'
const { duckQuack } = actions;

duckQuack.dispatch().after((current) => {
  console.log(current); // 'duck quacks'
});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Und so wird es in React aussehen .

import { observer, useDispatch } from '@biscuit-store/react';
import { actions } from './store/duck';
const { duckQuack } = actions;

export default observer(
  ({ value }) => {
    const [setQuack] = useDispatch(duckQuack);

    return (
      <div className='DuckWrapper'>
        <p>action: {value}</p>
        <button onClick={setQuack}>Duck quacks</button>
      </div>
    );
  },
  [duckQuack]
);

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Hier ist eine kleine Demo .

Das ist alles, danke für Ihre Aufmerksamkeit!

Projektwebsite

Biscuit-Store ist jung und braucht Unterstützung

Biscuit ist noch sehr jung und befindet sich im Beta-Test.

Wenn Ihnen diese Bibliothek gefällt, helfen Sie ihr bitte, als Sternchen auf GitHub zu wachsen. '