Redux + reactflow 通过 reducer 添加边

Question

嗨，我还是 redux 的新手，我正在尝试使用 redux 操作 reactflow 库中的节点，我设法通过 reducer 添加了一个节点，但是当我尝试添加一个边缘（节点之间的link）它returns一个警告任何人都可以帮助我如何在 reducer

中处理它

Link 如果您想查看代码 到沙箱 https://codesandbox.io/s/react-flow-add-node-button-with-redux-1q2dz?file=/src/store/reducer.js

warning image

Answer 1

这个问题更像是一个 react-flow 问题，而不是一个 redux 问题，但问题是您没有使用要连接的源节点和目标节点 ID 来调度操作。

应用程序：使用要连接的 vertices/node 个 ID 调度添加边缘操作：

const AddEdge = ({ source, target }) => {
  dispatch({
    type: "ADD_EDGE",
    source,
    target,
  });
};

Reducer - 不要改变状态对象，只是 return 一个新的 状态对象值：

export const reducer = (state = initialElements, action) => {
  switch (action.type) {
    case ADD_NODE:
      return [
        ...state,
        {
          id: Math.random().toString(),
          position: { x: 100, y: 50 },
          data: { label: "yo" }
        }
      ];
    case ADD_EDGE:
      return [
        ...state,
        {
          id: Math.random().toString(),
          source: action.source,
          target: action.target
        }
      ];
    default:
      return state;
  }
};

Redux + reactflow 通过 reducer 添加边

Redux + reactflow add edges through a reducer

reactjs

redux

react-redux

react-hooks