자연스러운 비동기 스토어 🤓

이 기사에서는 자연스러운 비동기식 예측 가능 유한 상태 관리자인 @atomico/store에 대해 알아봅니다. 하지만 먼저 일부 코드 👇.

시사

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 .

비동기 관리

애플리케이션 이벤트 및 서비스 호출은 기본적으로 비동기식입니다. @atomico/store를 사용하면 비동기식 함수 또는 비동기식 생성기를 사용하여 업데이트 주기를 정의할 수 있습니다.

업데이트 주기? 이것은 조치를 발송할 때 순차적으로 발생하는 상태를 의미합니다. 예를 들면 다음과 같습니다.

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를 사용하면 더 나은 모듈화를 위해 작업과 상점의 상태를 분리할 수 있습니다. 예를 들면 다음과 같습니다.

action.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(),
  };
}

store.js

import * as Actions from "./actions";

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

예시

@atomico/store는 AtomicoJS 프로젝트입니다.

AtomicoJS? 웹 구성 요소를 기반으로 인터페이스를 생성하기 위한 오픈 소스 프로젝트인 @atomico/store는 기능적 접근 방식으로 웹 구성 요소를 생성할 수 있는 단 3kB의 라이브러리인 Atomico로 생성되었습니다. 웹 구성 요소에 대한 경험을 향상시킬 것입니다.

👐 Atomicojs 커뮤니티에 가입하여 우리 프로젝트에 대해 자세히 알아보도록 초대합니다! 👇