使用状态管理库
🌐 Using a State Management Library
在本指南中，我们将解释如何将 React Flow 与状态管理库 Zustand 一起使用。我们将构建一个小型应用，每个节点都具有一个颜色选择器，用于更新其背景颜色。我们选择 Zustand 作为本指南的示例，因为 React Flow 内部已经使用了它，但你也可以轻松使用其他状态管理库，例如 Redux 、Recoil 或 Jotai
🌐 In this guide, we explain how to use React Flow with the state management library Zustand . We will build a small app where each node features a color chooser that updates its background color. We chose Zustand for this guide because React Flow already uses it internally, but you can easily use other state management libraries such as Redux , Recoil or Jotai
如前面的指南和示例所示，React Flow 可以轻松地与本地组件状态一起使用，以管理图表中的节点和连线。然而，随着应用的增长，当你需要从各个节点内部更新状态时，管理这些状态可能会变得更加复杂。你可以不通过节点的数据字段传递函数，而是使用 React context 或集成像 Zustand 这样的状态管理库，正如本指南中所述。
🌐 As demonstrated in previous guides and examples, React Flow can easily be used with a local component state to manage nodes and edges in your diagram. However, as your application grows and you need to update the state from within individual nodes, managing this state can become more complex. Instead of passing functions through the node’s data field, you can use a React context or integrate a state management library like Zustand, as outlined in this guide.
安装 Zustand
🌐 Install Zustand
如上所述，我们在此示例中使用 Zustand。Zustand 有点像 Redux：你有一个中央存储，带有用于更改状态的动作和用于访问状态的钩子。你可以通过以下方式安装 Zustand：
🌐 As mentioned above we are using Zustand in this example. Zustand is a bit like Redux: you have a central store with actions to alter your state and hooks to access your state. You can install Zustand via:
npm install --save zustand创建存储
🌐 Create a store
Zustand 让你创建一个钩子来访问存储的值和函数。我们将 nodes 和 edges 以及 onNodesChange、onEdgesChange、onConnect、setNodes 和 setEdges 函数放入存储中，以获得我们图表的基本交互性：
🌐 Zustand lets you create a hook for accessing the values and functions of your store. We put the nodes and edges and the onNodesChange, onEdgesChange, onConnect, setNodes and setEdges functions in the store to get the basic interactivity for our graph:
这就是基本的设置。我们现在有一个带有节点和边的存储，可以处理由 React Flow 触发的更改（拖动、选择或移除节点或边）。当你查看 App.tsx 文件时，你会发现它保持得整洁干净。所有数据和操作现在都是存储的一部分，可以通过 useStore 钩子访问。
🌐 That’s the basic setup. We now have a store with nodes and edges that can handle the changes (dragging, selecting or removing a node or edge) triggered by React Flow. When you take a look at the App.tsx file, you can see that it’s kept nice and clean. All the data and actions are now part of the store and can be accessed with the useStore hook.
实现颜色变化操作
🌐 Implement a color change action
我们添加了一个新的 updateNodeColor 操作来更新特定节点的 data.color 字段。为此，我们将节点 ID 和新的颜色传递给该操作，遍历节点并用新的颜色更新匹配的节点：
🌐 We add a new updateNodeColor action to update the data.color field of a specific node. For this we pass the node id and the new color to the action, iterate over the nodes and update the matching one with the new color:
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 组件中使用这个新操作，如下所示：
🌐 This new action can now be used in a React component like this:
const updateNodeColor = useStore((s) => s.updateNodeColor);
...
<button onClick={() => updateNodeColor(nodeId, color)} />;添加颜色选择器节点
🌐 Add a color chooser node
在这一步中，我们实现 ColorChooserNode 组件，并在用户更改颜色时调用 updateNodeColor。颜色选择器节点的自定义部分是颜色输入。
🌐 In this step we implement the ColorChooserNode component and call the updateNodeColor when the user changes the color. The custom part of the color chooser node is the color input.
<input
type="color"
defaultValue={data.color}
onChange={(evt) => updateNodeColor(id, evt.target.value)}
className="nodrag"
/>我们添加 nodrag 类名，以便用户在更改颜色时不会误拖节点，并在 onChange 事件处理程序中调用 updateNodeColor。
🌐 We add the nodrag class name so that the user doesn’t drag the node by mistake when changing the color and call the updateNodeColor in the onChange event handler.
你现在可以单击颜色选择器并更改节点的背景。
🌐 You can now click on a color chooser and change the background of a node.