Using gojs with reactjs and redux

@maciekm wrote:

Hi,

I'm trying to use go.js with react and redux. I want to have my graph model stored in redux store and I'd like to be able to change this model from outside of go.js (for example someone clicks a button on a page, react/redux updates store and as a result graph also gets updated).

I use diagram.model.addChangedListener to trigger updates in store whenever something gets changed directly in gojs (say, user resized a node). This works as I'd like it to. I dispatch an action, reducer gets called with current model which gets stored in redux store. The problem is that as soon as I change something from outside of gojs itself my UndoManager stops working correctly.

Basically what react does is calling a method every time data connected to a part of DOM gets changed. In my case this method looks like this (this.props.nodes contains latest state of nodes from redux store):

componentDidUpdate(prevProps, prevState, prevContext) {
    if (this.props.nodes !== prevProps.nodes) {
        let diagram = this.state.myDiagram;
        diagram.model.nodeDataArray = this.props.nodes;
    }
}

If a node gets changed in redux store because someone changed something in the application (clicked a button for example) this method will be called and nodeDataArray will be overriden. As soon as it happens ctrl+z stops working (when I call it, everythin disappears).

Is there a way to get this flow working? I mean, I probably could iterate previous nodes from prevState, compare them to this.props.nodes (new state) and try to only update changed nodes. This is - however - quite complicated and I'd rather avoid it if possible.

I am able to provide a full example if needed (in typescript), but it is quite big (more than 100 lines of code) so I don't want to put it here if it is not needed.

Regards
Maciek

Posts: 2

Participants: 2

Read full topic