useFlow 순환참조 해결하기

stackflow() 함수가 반환하는 useFlow() 함수는 선언된 액티비티 타입을 활용해요. 따라서 useFlow()와 액티비티 컴포넌트는 서로 맞물리면서 순환 참조(Circular Dependency)를 일으켜요. useActions() 훅을 사용하고 타입을 따로 import 받으면 이러한 순환 참조를 제거할 수 있어요.

/**
 * stackflow.ts
 */
import { stackflow } from "@stackflow/react";

export const { Stack, activities } = stackflow({
  activities: {
    // ...
  },
  // ...
});

// 다음과 같이 액티비티의 타입을 노출해요.
export type TypeActivities = typeof activities;

/**
 * useMyFlow.ts
 */
import { useActions } from "@stackflow/react";

// 노출된 액티비티 타입만 가져와서 사용해요.
import type { TypeActivities } from "./stackflow";

export const useMyFlow = () => {
  return useActions<TypeActivities>();
};