faasjs-react-ant-design

FaasJS React と Ant Design

デフォルトのワークフロー

1. features/<feature>/ 配下の機能固有ファイルから始めます。
2. Ant Design アプリでは、リクエストエラーとフィードバックの一貫性を保つため、@faasjs/ant-design のリクエスト関連エクスポートを使用します。
3. コンポーネントが所有するリクエストには useFaas、イベントハンドラーには faas、送信には Form の faas、ストリーミングには useFaasStream を使用します。
4. 原則としてネイティブの useEffect は避け、副作用やプリミティブでない依存関係には FaasJS React のライフサイクルヘルパーを使用します。
5. 独立したコンポーネントやコンポーネントツリー間でデータの変更を伝播させる必要がある共有状態には、createProxyStates を使用します。
6. CRUD では、個別の単発フローを別々に作るのではなく、共有の機能メタデータから一覧、詳細、作成／更新、削除を組み立てます。

これらのリファレンスを読み込む

• コンポーネントとフックのルール：references/guidelines/react.md。
• リクエストフローの選択とライフサイクル制御：references/guidelines/react-data-fetching.md。
• @faasjs/ant-design のページ、ルート、CRUD、フィードバックのパターン：references/guidelines/ant-design.md。
• React のリクエストフローとコンポーネントのテスト：references/guidelines/react-testing.md。
• CRUD の垂直スライス全体の組み立て：references/guidelines/crud-patterns.md。

注意点

• Ant Design アプリでは、@faasjs/ant-design から faas、useFaas、useFaasStream、FaasReactClient、FaasDataWrapper、withFaasData をインポートします。
• @faasjs/react から createProxyStates をインポートし、機能固有の安定した状態チャネルを作成して、生成された useXxx、setXxx、xxxRef ヘルパーをエクスポートします。
• フックの戻り値は呼び出し箇所で分割代入します。広範な result オブジェクトや states オブジェクトを保持しないでください。
• React のイベントハンドラーは原則としてインラインにします。再利用や明確な境界が必要な場合にのみ切り出します。
• オブジェクトまたは配列の依存関係には、ネイティブの依存配列ではなく、等価性を考慮したメモ化／エフェクトのヘルパーを使用します。
• 制御されたフィールドの表示には hidden を、値に応じた表示には if(values) を使用します。プロパティや関連する値が変わったときにも、表示状態を再度テストします。
• コンポーネント内の状態には useStates または useStatesRef を、プロバイダーのスコープ内で共有する状態には createSplittingContext を優先します。セッターが呼び出される場所にかかわらず、データ変更の通知をコンポーネント間で伝える必要がある場合は createProxyStates を使用します。

検証

• 影響を受けるコンポーネント、フック、またはリクエストフローのテストには vp test <pattern> を使用します。
• リクエスト層の React テストには setMock を使用します。
• UI ファイルを変更した場合は、引き渡し前に vp check --fix を実行します。