使用狀態管理函式庫

在本指南中，我們將說明如何將 React Flow 與狀態管理函式庫 Zustand 一起使用。我們將建立一個小型應用程式，其中每個節點都有一個顏色選擇器，可更新其背景顏色。在本指南中，我們使用 Zustand，因為我們在 React Flow 內部已經使用它，但當然您也可以使用其他任何函式庫，例如Redux、Recoil 或 Jotai。

您可能在之前的指南和範例中已經看過，React Flow 可以輕鬆地與本機元件狀態一起使用，以處理圖表的節點和邊緣。當您的應用程式成長，並且您想要例如從節點內部變更狀態時，事情可能會變得更複雜。為了避免透過節點資料欄位向下傳遞函式，您可以使用 React context 或新增狀態管理函式庫，如此指南中所述。

安裝 Zustand

如上所述，我們在此範例中使用 Zustand。Zustand 有點像 Redux：您有一個中央儲存，其中包含用於變更狀態的動作和用於存取狀態的鉤子。您可以透過以下方式安裝 Zustand

npm install --save zustand

pnpm add zustand

yarn add zustand

bun add zustand

建立儲存

Zustand 可讓您建立一個鉤子，用於存取儲存的值和函式。我們將 nodes 和 edges 以及 onNodesChange、onEdgesChange、onConnect、setNodes 和 setEdges 函式放在儲存中，以取得圖表的基本互動性

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

這是基本設定。我們現在有一個儲存，其中包含節點和邊緣，可以處理 React Flow 觸發的變更（拖曳、選取或移除節點或邊緣）。當您查看 App.tsx 檔案時，您會發現它保持整潔。所有資料和動作現在都是儲存的一部分，並且可以使用 useStore 鉤子存取。

實作顏色變更動作

我們新增一個新的 updateNodeColor 動作，以更新特定節點的 data.color 欄位。為此，我們將節點 ID 和新顏色傳遞給動作，迭代節點並使用新顏色更新符合的節點

updateNodeColor: (nodeId: string, color: string) => {
  set({
    nodes: get().nodes.map((node) => {
      if (node.id === nodeId) {
        // it's important to create a new object here, to inform React Flow about the changes
        return { ...node, data: { ...node.data, color } };
      }
 
      return node;
    }),
  });
};

此新動作現在可以在 React 元件中這樣使用

const updateNodeColor = useStore((s) => s.updateNodeColor);
...
<button onClick={() => updateNodeColor(nodeId, color)} />;

新增顏色選擇器節點

在此步驟中，我們實作 ColorChooserNode 元件，並在使用者變更顏色時呼叫 updateNodeColor。顏色選擇器節點的自訂部分是顏色輸入。

<input
  type="color"
  defaultValue={data.color}
  onChange={(evt) => updateNodeColor(id, evt.target.value)}
  className="nodrag"
/>

我們新增 nodrag 類別名稱，以便使用者在變更顏色時不會意外拖曳節點，並在 onChange 事件處理程式中呼叫 updateNodeColor。

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

您現在可以按一下顏色選擇器並變更節點的背景。