Want to connect react redux to the editor, in order to use useDispatch() inside the editor ref

[Ankita-TechVariable]

This is my code snippet:

import Rete from "rete";
import React from "react";
import ReactRenderPlugin from "rete-react-render-plugin";
import ConnectionPlugin from "rete-connection-plugin";
import MarketCard from "../reteComponents/sourceCard";
import DestinationCard from "../reteComponents/destinationCard";
import JoineeCard from "../reteComponents/joineeCard";
import store from "../../redux/store";
import StyledNode from "../reteComponents/styledNode";
import { Provider, useDispatch } from "react-redux";

var editor;
var engine;
var components = [];

async function createEditor(container, droppedItem, count) {
  if (count === 0) {
    editor = new Rete.NodeEditor("demo@0.1.0", container);
    editor.use(ConnectionPlugin);
    editor.use(ReactRenderPlugin, { component : props =>(
    <Provider store={store}>
      <StyledNode {...props}/>
  </Provider>)
} )
    engine = new Rete.Engine("demo@0.1.0");
  } else {
    if (droppedItem.element === "output") {
      var comp = new MarketCard(droppedItem.header);
    } else if (droppedItem.element === "input") {
      comp = new DestinationCard(droppedItem.header);
    } else comp = new JoineeCard(droppedItem.header);
   const dispatch = useDispatch();
    components = [...components, comp];
    // console.log("Di", components[components.length - 1], components);
    editor.register(components[components.length - 1]);
    engine.register(components[components.length - 1]);

    var n1 = await components[components.length - 1].createNode();
    console.log('n1', n1, components);
    n1.position = droppedItem.axis;
    editor.addNode(n1);
    editor.on( 
      "connectioncreated connectionremoved",

      async () => {
        await engine.abort();
        let data = await editor.toJSON();
        console.log(data);
        // await engine.process(data);
      }
    );
    editor.on("nodeselect", async () => {
      // dispatch(displayModal());
    })
    editor.trigger("process");
  }
}

export default createEditor;

All I wanted to do was on each node selected, I wanted to render a modal and to make that possible i wanted to use redux, but somehow the useDispatch can't be used outside react.

This is where I wanted to use dispatch:

 editor.on("nodeselect", async () => {
      // dispatch(displayModal());
    })

How to solve this issue?

[rete-js[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.