본문으로 건너뛰기

함수: injectQueuer()

function injectQueuer<TValue, TSelected>(
   fn, 
   options, 
selector): AngularQueuer<TValue, TSelected>;

정의 위치: angular-pacer/src/queuer/injectQueuer.ts:90

Queuer 인스턴스를 생성하고 관리하는 Angular 함수입니다.

Queuer 기능에 직접 접근할 수 있게 해 주는 저수준 함수입니다. 원하는 상태 관리 솔루션과 통합할 수 있습니다.

Queuer는 각 항목 처리 사이에 선택적 지연을 적용하여 항목을 순서대로 동기 처리합니다. 큐어에는 시작하고 중지할 수 있는 내부 틱 메커니즘이 있어 스케줄러로 활용할 수 있습니다.

상태 관리와 셀렉터​

이 함수는 TanStack Store로 상태를 관리하고 이를 Angular 시그널로 래핑합니다. selector 매개변수로 어떤 상태 변경이 시그널 업데이트를 트리거할지 지정할 수 있으며, 관련 없는 상태가 변경될 때 불필요한 업데이트를 방지하여 성능을 최적화합니다.

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

타입 매개변수​

TValue​

TValue

TSelected​

TSelected = { }

매개변수​

fn​

(item) => void

options​

AngularQueuerOptions&lt;TValue, TSelected> = {}

selector​

(state) => TSelected

반환값​

AngularQueuer&lt;TValue, TSelected>

예시​

// Default behavior - no reactive state subscriptions
const queue = injectQueuer(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 }
);

// Opt-in to track queue contents changes
const queue = injectQueuer(
  (item) => console.log('Processing:', item),
  { started: true, wait: 1000 },
  (state) => ({ items: state.items, size: state.size })
);

// Add items
queue.addItem('task1');

// Access the selected state
const { items, isRunning } = queue.state();

제거 시 정리​

기본적으로 컴포넌트가 제거되면 큐어를 중지합니다. onUnmount 옵션으로 이 동작을 사용자 지정할 수 있습니다. 예를 들어 대기 중인 항목을 대신 플러시하려면 다음과 같이 설정합니다.

const queue = injectQueuer(fn, {
  started: true,
  onUnmount: (q) => q.flush()
});