Clever Geek Handbook

Biscuit-store-JavaScriptアプリケーションの状態管理の別の見方

ご列席の皆様、ご挨拶！この記事では、Biscuit-storeJavaScriptライブラリを紹介します。





説明

Biscuitは、JavaScriptアプリケーションでマネージドステートコンテナーを作成し、便利に操作するための多機能で柔軟なモジュラーツールです。





記事の主な目的

  • ビスケット店とその目標について教えてください。





  • 他の同様のツールとの比較。





  • 機能の概要を説明します。





ここでは、内部については説明しませんが、簡単な概要のみを説明します。





ビスケット店の長所

  • 実行の簡素化を目指して;





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

アダプタは、ロジックを状態に関連付けることができるミドルウェアモジュールです。





私たちのアヒルは大きな世界に行く準備ができています。





彼女が何ができるかを確認しましょう。





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

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

duckQuack.dispatch();

次のようにすることもできます。





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

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

そして、これは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]
);

これが小さなデモです。





以上、ご清聴ありがとうございました！





プロジェクトのウェブサイト





Biscuit-storeは若く、サポートが必要です

ビスケットはまだ非常に若く、ベータテスト中です。

このライブラリが気に入ったら、GitHubのアスタリスクとして成長するのを手伝ってください'







More articles:


All Articles