함수: createAsyncBatcher()

function createAsyncBatcher<TValue, TSelected>(
   fn, 
   options, 
selector): SolidAsyncBatcher<TValue, TSelected>;

정의 위치: solid-pacer/src/async-batcher/createAsyncBatcher.ts:189

비동기 항목 배치를 관리하는 Solid 호환 AsyncBatcher 인스턴스를 생성하고 모든 상태 속성을 Solid 시그널로 노출합니다.

createBatcher 훅의 비동기 버전입니다. 동기 버전과 달리 이 비동기 배처는 다음을 지원합니다.

• 프로미스를 처리하고 배치 실행 결과를 반환합니다.
• 구성 가능한 오류 동작으로 오류를 처리합니다.
• 성공, 오류 및 완료 횟수를 별도로 추적합니다.
• 배치 실행 여부를 상태로 추적합니다.
• 배치 함수 실행 결과를 반환합니다.

기능:

• 구성 가능한 배치 크기 및 대기 시간
• getShouldExecute를 통한 사용자 지정 배치 처리 로직
• 배치 작업 모니터링을 위한 이벤트 콜백
• 실패한 배치 작업의 오류 처리
• 자동 또는 수동 배치 처리
• 모든 상태 속성(항목, 횟수 등)은 반응성을 위해 Solid 시그널로 노출됩니다.

배처는 다음 조건에 따라 항목을 모아 배치로 처리합니다.

• 최대 배치 크기(배치당 항목 수)
• 시간 기반 배칭(X밀리초 후 처리)
• getShouldExecute를 통한 사용자 지정 배치 처리 로직

오류 처리:

• onError 핸들러를 제공하면 오류 및 배처 인스턴스와 함께 호출됩니다.
• throwOnError가 true이면(onError 핸들러가 없을 때의 기본값) 오류가 발생합니다.
• throwOnError가 false이면(onError 핸들러가 있을 때의 기본값) 오류가 처리된 것으로 간주됩니다.
• onError와 throwOnError를 함께 사용할 수 있으며 오류가 발생하기 전에 핸들러가 호출됩니다.
• 내부 AsyncBatcher 인스턴스를 사용해 오류 상태를 확인할 수 있습니다.

상태 관리와 셀렉터

훅은 반응형 상태 관리에 TanStack Store를 사용합니다. 다음 두 가지 방식으로 상태 변경을 구독할 수 있습니다. 구독 방식은 다음과 같습니다.

1. batcher.Subscribe 컴포넌트 사용(컴포넌트 트리 구독에 권장)

Subscribe 컴포넌트를 사용하면 컴포넌트 트리 깊은 곳에서 상태 변경을 구독하면서도 훅에 셀렉터를 전달할 필요가 없습니다. 자식 컴포넌트에서 상태를 구독하려는 경우에 적합합니다.

2. selector 매개변수 사용(훅 수준 구독)

selector 매개변수로 반응형 업데이트를 트리거할 상태 변경을 지정할 수 있으며, 훅 수준에서 관련 없는 상태가 변경될 때 불필요한 업데이트를 방지하여 성능을 최적화합니다.

기본적으로 반응형 상태 구독은 없습니다. 반응형 상태를 추적하려면 셀렉터 함수를 제공하여 셀렉터 함수를 제공하거나 Subscribe 컴포넌트를 사용해 명시적으로 활성화해야 합니다. 이를 통해 불필요한 업데이트를 방지하고 컴포넌트가 상태 변경을 추적할 시점을 완전히 제어할 수 있습니다.

사용할 수 있는 상태 속성은 다음과 같습니다.

• errorCount: 실패한 배치 실행 횟수
• executionCount: 전체 배치 실행 시도 횟수(성공 + 실패)
• hasError: 마지막 배치 실행에서 오류가 발생했는지 여부
• isExecuting: 현재 배치 실행이 진행 중인지 여부
• items: 현재 배칭을 위해 큐에 대기 중인 항목 배열
• lastError: 가장 최근 실패한 배치 실행의 오류(있는 경우)
• lastResult: 가장 최근에 성공한 배치 실행 결과
• settleCount: 성공 또는 실패로 완료된 배치 실행 횟수
• successCount: 성공한 배치 실행 횟수

언마운트 동작

기본적으로 소유 컴포넌트가 마운트 해제되면 대기 중인 배치를 취소하고 진행 중인 실행을 중단합니다. getAbortSignal()의 중단 신호를 내부 작업(예: fetch)에 전달한 경우에만 Abort가 해당 작업을 취소합니다. onUnmount 옵션으로 이 동작을 사용자 지정할 수 있습니다. 예를 들어 대기 중인 작업을 대신 플러시하려면 다음과 같이 설정합니다.

const batcher = createAsyncBatcher(fn, {
  maxSize: 10,
  wait: 2000,
  onUnmount: (b) => b.flush()
});

참고: 비동기 유틸리티에서 flush()는 Promise를 반환하며 정리 과정에서는 실행 후 결과를 기다리지 않습니다. batch 함수가 Solid 시그널을 업데이트하면 해당 업데이트는 컴포넌트가 마운트 해제된 후 실행될 수 있으며 예상치 못한 반응형 업데이트가 발생할 수 있습니다. 따라서 onUnmount에서 flush를 사용할 때는 콜백을 적절히 보호해야 합니다.

사용 예시:

// Default behavior - no reactive state subscriptions
const asyncBatcher = createAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  {
    maxSize: 10,
    wait: 2000,
    onSuccess: (result) => {
      console.log('Batch processed successfully:', result);
    },
    onError: (error) => {
      console.error('Batch processing failed:', error);
    }
  }
);

// Opt-in to track items or isExecuting changes (optimized for UI updates)
const asyncBatcher = createAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  { maxSize: 10, wait: 2000 },
  (state) => ({ items: state.items, isExecuting: state.isExecuting })
);

// Opt-in to track error state changes (optimized for error handling)
const asyncBatcher = createAsyncBatcher(
  async (items) => {
    const results = await Promise.all(items.map(item => processItem(item)));
    return results;
  },
  { maxSize: 10, wait: 2000 },
  (state) => ({ hasError: state.hasError, lastError: state.lastError })
);

// Add items to batch
asyncBatcher.addItem(newItem);

// Manually execute batch
const result = await asyncBatcher.execute();

// Access the selected state (will be empty object {} unless selector provided)
const { items, isExecuting } = asyncBatcher.state();

타입 매개변수

TValue

TValue

TSelected

TSelected = { }

매개변수

fn

(items) => Promise<any>

options

SolidAsyncBatcherOptions<TValue, TSelected> = {}

selector

(state) => TSelected

반환값

SolidAsyncBatcher<TValue, TSelected>