自然非同期ストア🤓

この記事では、@ Atomico/ストア、自然に非同期、予測可能な有限状態マネージャについて説明します.しかし最初のコード👇.

プレビュー

interface State {
  api: string;
  loading: boolean;
  products: { id: number; title: string; price: number };
}

const initialState = (state: State) => ({
  api: "",
  loading: false,
  products: [],
});

async function* getProducts(state: State) {
  yield { ...state, loading: true };
  return {
    ...(yield),
    loading: false,
    products: await (await fetch(state.api)).json(),
  };
}

const store = new Store(initialState, {
  actions: { getProducts },
});

上記のコードは次の目標を解決します.

Asynchrony management .

Finitely predictable asynchrony .

Modularity and composition .

非同期管理

アプリケーションイベントとサービスコールは、非同期の関数や非同期発電機を使用して更新サイクルを定義することができます.
更新サイクル?これによって、アクションのディスパッチ時に発生する状態を表します.

async function* getProducts(state: State) {
  yield { ...state, loading: true };
  return {
    ...(yield),
    loading: false,
    products: await (await fetch(state.api)).json(),
  };
}

前のアクションは2つの状態を生成します.

1{loading: true, products:[]}

状態2 :{loading: false, products:[...product]}

この利点は、プロセスが明らかに店によって観察され、誰でもアクションを派遣することです.

有限予測非同期性

@ atomico/storeのすべてのアクションは、そのサイクルを終了したときに定義される約束に包まれます.

await store.actions.orderyBy();
await store.actions.insert({ id: 1000 });
await store.actions.updateAll();

モジュール性と組成

@ atomico/storeは、より良いモジュール化のために、動作と状態を切り離します.
アクション.js

export interface State {
  api: string;
  loading: boolean;
  products: { id: number; title: string; price: number };
}

export const initialState = (state: State) => ({
  api: "",
  loading: false,
  products: [],
});

export async function* getProducts(state: State) {
  yield { ...state, loading: true };
  return {
    ...(yield),
    loading: false,
    products: await (await fetch(state.api)).json(),
  };
}

ストア.js

import * as Actions from "./actions";

export default new Store(Actions.initialStore, { actions: { Actions } });

例

@ atomico / storeはAtomicoJSプロジェクトです。

AtomicoJS? WebComponentに基づいてインターフェイスの作成のためのオープンソースプロジェクトは、@ Atomico/ストアAtomico、機能的なアプローチでWebコンポーネントを作成できるようになりますわずか3 KBのライブラリで作成された、我々はAtomicoとWebコンポーネントを使用して経験を向上させるツールについての詳細をお勧めします.
👐 私はAtomicoJSコミュニティに参加し、我々のプロジェクトについての詳細を学ぶ招待!👇