Biscuit-store - pandangan lain tentang manajemen negara dalam aplikasi JavaScript

Salam bapak ibu sekalian! Pada artikel ini, saya akan memperkenalkan pustaka JavaScript toko Biskuit.

Deskripsi

Biscuit adalah alat multifungsi, fleksibel, dan modular untuk membuat dan bekerja dengan nyaman dengan wadah keadaan terkelola dalam aplikasi JavaScript.

Tujuan utama artikel

• Ceritakan tentang toko biskuit dan tujuannya;

  
  
  
  
  

• Perbandingan dengan alat sejenis lainnya;

  
  
  
  
  

• Berikan gambaran singkat tentang fungsionalitas tersebut.

  
  
  
  
  

Di sini saya tidak akan menyelam di bawah tenda, tetapi hanya akan memberikan gambaran singkat.

Kelebihan dari toko biskuit

• Mengupayakan kesederhanaan eksekusi;

  
  
  
  
  

• 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;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Adaptor adalah modul middleware yang memungkinkan Anda menghubungkan logika ke status.

Bebek kami siap untuk pergi ke dunia besar.

Mari kita periksa apa yang dia mampu.

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

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

duckQuack.dispatch();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Anda juga bisa melakukannya seperti ini:

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

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dan akan terlihat seperti ini di React .

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]
);

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ini demo kecilnya .

Sekian terima kasih atas perhatiannya!

Situs web proyek

Toko biskuit masih muda dan membutuhkan dukungan

Biskuit masih sangat muda dan dalam pengujian beta.

Jika Anda menyukai perpustakaan ini, tolong bantu perpustakaan ini tumbuh sebagai tanda bintang di GitHub '