search

MrBlenny / react-flow-chart

🌊 A flexible, stateless, declarative flow chart library for react.
https://mrblenny.github.io/react-flow-chart/index.html
MIT License
1.49k stars 307 forks source link

Discussion: What does a Redux implementation look like? #36

Open phlickey opened 5 years ago

phlickey commented 5 years ago

@MrBlenny What's your vision for a "redux state container"?

Would this just be a story, similar to ExternalReactState except mapping the internal state actions to the redux action dispatcher?

MrBlenny commented 5 years ago

I was thinking another file containing redux actions would be added to this lib. These would roughly conform to the the existing type definitions but include an action name. For example

export type IOnDragNodeAction = (input: { config?: IConfig, event: MouseEvent, data: DraggableData, id: string }) => ({
  type: 'REACT_FLOW_CHART/ON_DRAG_NODE',
  config: IConfig, 
  event: MouseEvent, 
  data: DraggableData, 
  id: string
})

The state logic (that currently resided in the actions.ts file) would then be copied over to a reducer and changed so it no longer mutates.

Unfortunately, I'm quite busy right now so not sure if I'll be able to work on this soon.

prativm commented 4 years ago

@MrBlenny Any update on this.? It would be great to have a clear idea of Redux implementation.

davidanitoiu commented 4 years ago

Not sure if it's the correct way to do it, but here's how I did it.

I basically left the chart to itself, and let redux handle only the business logic.

https://codesandbox.io/s/qkz88 https://github.com/davidanitoiu/deployment-pipeline