ActiveJS를 사용한 비동기 상태 관리

This article is a follow-up to a previous article about synchronous state management, . I'd suggest that you at least take a quick look at it so that you understand this one better. (It's okay if you don't feel like it, I'll try to keep it simple :)

ActiveJS 이라는 상태 관리 라이브러리를 만들었습니다. 여기서 비동기 상태 관리는 나중에 고려하지 않아도 됩니다. ActiveJS는 상태 관리를 단순하게 만들고 현재 주류 솔루션에 필요한 코드 벽을 없애기 위해 노력합니다.

자, 더 이상 인사하지 않고 시작하겠습니다.

이것이 우리가 목표로 삼고 가능한 한 적은 코드로 달성할 것입니다.

Async API 호출의 4가지 주요 측면:

쿼리하기

응답 처리

오류 처리

Pending-Status 확인 또는 듣기

그리고 다음과 같은 몇 가지 상황적 측면:

수신된 응답 저장

API 호출의 응답 및 상태 공유

요청을 재시도하거나 재생할 수 있음

응답성공 시 저장된 에러를 지우는 등

이제 우리가 달성해야 하는 것이 무엇인지 알았으므로 모든 메커니즘을 처음부터 설정할 필요가 없는 이 모든 작업을 수행할 수 있는 일종의 시스템만 있으면 됩니다.

이것은 위의 모든 것을 달성하는 데 필요한 모든 코드입니다.

import {AsyncSystem} from '@activejs/core'

const asyncSystem = new AsyncSystem()
const {queryUnit, dataUnit, errorUnit, pendingUnit} = asyncSystem

async function fetchAndShare(query) {
  try {
    const response = await fetch('https://xyz.com/?q=' + query)
    const data = await response.json()
    dataUnit.dispatch(data)
  } catch (err) {
    errorUnit.dispatch(err)
  }
}

queryUnit.future$.subscribe(query => fetchAndShare(query))
queryUnit.dispatch('some query')

무슨 일이 일어나고 있는지 이해하지 못하더라도 괜찮습니다. 한 줄 한 줄 함께 이해하겠습니다.

가장 중요한 부분은 AsyncSystem 입니다.

import {AsyncSystem} from '@activejs/core';

// initialize an AsyncSystem, ready to receive, store, and share.
const asyncSystem = new AsyncSystem();

AsyncSystem은 내부적으로 생성하는 4개의 개별 반응 데이터 구조Units의 체계적인 조합으로, 이러한 단위는 Query, Data, Error 및 Pending-Status와 같은 비동기 API 호출의 각 주요 측면과 관련됩니다.

AsyncSystem은 또한 위에서 언급한 상황적 측면 중 일부를 달성하기 위해 이러한 단위 간에 몇 가지 사용자 지정 관계를 생성합니다. 이러한 관계는 AsysnSystem에 구성 플래그를 전달하여 활성화 또는 비활성화할 수 있습니다.

더 쉽게 액세스할 수 있도록 데이터 구조 추출

// using ES6 destructuring assignment
const {queryUnit, dataUnit, errorUnit, pendingUnit} = asyncSystem;

queryUnit 쿼리를 저장 및 공유하고 API 호출을 트리거합니다.dataUnit 응답 데이터 저장 및 공유errorUnit 오류 데이터 저장 및 공유pendingUnit Pending-Status 저장 및 공유

기본 가져오기 API를 사용하여 데이터 가져오기 로직 설정

// a function to fetch data and disptch the response appropriately
async function fetchAndShare(query) {
  try {
    // fetch data using fetch API
    const response = await fetch('https://xyz.com/?q=' + query);
    // extract the JSON data
    const data = await response.json();

    // dispatch data to the dataUnit
    // it also sets the pendingUnit's value to false, automatically
    // and, it sets the errorUnit's value to undefined, automatically
    dataUnit.dispatch(data);
  } catch (err) {
    // dispatch error to errorUnit
    // it also sets the pendingUnit's value to false, automatically
    errorUnit.dispatch(err);
  }
}

queryUnit을 구독하여 API 요청 트리거 설정

// whenever a value is dispatched to queryUnit,
// the 'fetchAndShare' will get called
queryUnit.future$.subscribe(query => fetchAndShare(query));
// we can also subscribe to the queryUnit directly, but by using
// future$ we make sure that we start making API calls only after a 
// new dispach, otherwise it'd have already made a call.

위에서 방금 추출한 반응 데이터 구조를 구독하여 이미 값 수신을 시작할 수 있습니다.

언제 어디서나 필요한 만큼의 가치에 귀를 기울이십시오.

// listen for queries
queryUnit.subscribe(query => console.log(query));
// logs undefined immediately and will log future values

// listen for data
dataUnit.subscribe(data => console.log(data));
// logs undefined immediately and will log future values

// listen for errors
errorUnit.subscribe(error => console.log(error));
// logs undefined immediately and will log future values

// listen for pending status
pendingUnit.subscribe(isPending => console.log(isPending));
// logs false immediately and will log future values

남은 것은 API 호출을 트리거하는 것뿐입니다. 이 작업은 값을 queryUnit 에 전달하여 어디서나 수행할 수 있으며 나머지는 AsyncSystem 및 방금 작성한 논리에서 처리됩니다.

API 요청 트리거

// dispatch a query
// it also sets the pendingUnit's value to true, automatically
queryUnit.dispatch(42)

마지막 API 요청 재시도/재생

// replay the query
// it also sets the pendingUnit's value to true, automatically
queryUnit.replay()
// it'll re-emit the current query value (i.e. 42 in this case),
// and the rest will work the same as triggering a new API request

모든 것이 완료되었습니다.

ActiveJS가 매우 효율적으로 수행할 수 있는 작업이 훨씬 더 많지만 다른 기사에서 이에 대해 논의해 보겠습니다.

다음은 AsyncSystem 및 RxJS 연산자로 빌드된 간단한StackBlitz Typeahead example입니다(직접 시도하고 싶다면).

다음은 코드를 작성하지 않고도 시도해 볼 수 있는 visual playground for AsyncSystem입니다.


여기까지 왔다면,
정보를 너무 많이 추가했거나 너무 적게 추가했다면 알려주세요.
또한 다음 기사에서 ActiveJS가 무엇을 했으면 하는지 알려주세요.

건배

🌏 ActiveJS Website
📖 ActiveJS Documentation
🤾‍♂️ ActiveJS Playground
💻 ActiveJS GitHub Repo (⭐을 떨어뜨릴 수도 있습니다 :)