Storing core immutably triggers endless loop

[SherlockMones]

Problem

Loading network data from NDEx and storing the CX in my network.state.

As soon as the library is done with rendering, I store the received Cytoscapejs core in the network.state. Since I'm working immutable, I update my state as such:

  on(renderNetworkSuccess, (state: NetworkState, { core }): NetworkState => ({ ...state, core }))

The new reference re-triggers the rendering resulting in an endless loop that kills the app.

I tried moving the core into a separate state (graph.state), which would be fine for my use case, but it still triggers the update for all states (graph.state and network.state), which leads to the same problem. (See code from graph.state below)

  on(renderNetworkSuccess, (state: GraphState, {core}): GraphState => ({...state, core})),

Steps to reproduce

• Create a simple project with NgRx
• one state holding the network data
• store the resulting core in the same state
• watch your browser suffer

Favored solution

I would need persistent access to the core for further actions on the graph. Storing that in any of my states is mandatory for me. Maybe add an option to skip re-rendering the network with sort of a debounce time? Alternatively a separate input.

Project

• Angular 13.3.4
• Node: 16.15.0
• NgRx 13.1.0
• ngx-cytoscapejs 1.0.0

[9von10]

Hello SherlockMones,

thank you for your issue. After some tests you will find my results below:

The error seems to be related to how NgRx handles state objects. Contrary to your statement there is no endless loop. The exception occurrs the first time setting the cytoscape.Core as a state property.

Sadly the best solution seems to be to store the core in a service and not in the state itself.

Furthermore see the following similar issue in the cytoscape.js repository: cytoscape/cytoscape.js#2993.