Redux + reactflow add edges through a reducer

Question

Hi I'm still new to redux and I'm trying to manipulate the nodes in reactflow library using redux, I've managed to add a node through a reducer but when I try to add an edge(the link between nodes) it returns a warning can anyone helps me with how to handle it in reducer

Link to sandbox if you want to see the code https://codesandbox.io/s/react-flow-add-node-button-with-redux-1q2dz?file=/src/store/reducer.js

warning image

Answer 1

This question is more a react-flow question than it is a redux question but the issue is that you aren't dispatching an action with the source and target node ids you want to connect.

App: dispatch the add edge action with the vertices/node ids you want to connect:

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

Reducer - don't mutate the state object, just return a new state object value:

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;
  }
};