useStoreApi

ストアに直接アクセスする必要がある場合があります。このフックは、必要に応じて状態にアクセスしたり、アクションをディスパッチしたりするために使用できるストアオブジェクトを返します。

このフックは、内部状態にアクセスする他の方法がない場合にのみ使用する必要があります。多くの一般的なユースケースでは、useReactFlow、useViewportなどの専用のフックが用意されています。

import { useState, useCallback } from 'react';
import { ReactFlow, useStoreApi } from '@xyflow/react';
 
const NodesLengthDisplay = () => {
  const [nodesLength, setNodesLength] = useState(0);
  const store = useStoreApi();
 
  const onClick = useCallback(() => {
    const { nodes } = store.getState();
    const length = nodes.length || 0;
 
    setNodesLength(length);
  }, [store]);
 
  return (
    <div>
      <p>The current number of nodes is: {nodesLength}</p>
      <button onClick={onClick}>Update node length.</button>
    </div>
  );
};
 
function Flow() {
  return (
    <ReactFlow nodes={nodes}>
      <NodesLengthLogger />
    </ReactFlow>
  );
}

この例では、フロー内のノードの数を*オンデマンド*で計算しています。これは、ノードの数が変更されるたびにコンポーネントを再レンダリングするuseStoreフックの例とは対照的です。

値をオンデマンドで計算するか、変更が発生したときに購読するかは、バランスの問題です。イベントハンドラに重い計算が多すぎると、アプリの動作が遅くなったり、応答しなくなったりする可能性があります。一方、値を事前に計算すると、レンダリングが遅くなったり、不要なレンダリングが発生したりする可能性があります。

このフックとuseStoreの両方を用意することで、ユースケースに最適なアプローチを選択できます。

シグネチャ

名前	型
#戻り値
#	`Zustand.StoreApi<ReactFlowState>`

TypeScript

このフックは、カスタムノードとエッジ型のジェネリック型引数を受け入れます。詳細については、TypeScriptガイドのこのセクションを参照してください。

const store = useStoreApi<CustomNodeType, CustomEdgeType>();

フックユーティリティ