Need help with redux and externalState setup

[mrblenny]

Need help with redux and externalState setup

[phlickey]

Hey @dSecret ,

Have been trying to figure out this example myself today as well. Using the mapValues method from lodash kind of obscures what's really going on under the hood. Basically, what it's doing is mapping the default actions to actions that update the state of the container class.

The example below makes use of state with hooks and shows a little more verbosely how the action callbacks work. If you were using redux, this is where you would dispatch actions.

import React, {useState, useEffect} from "react";
import {FlowChart} from "@mrblenny/react-flow-chart";
import * as actions from "@mrblenny/react-flow-chart/src/container/actions";
export default function ChatEditor(){
    let [chart, updateChart] = useState({
        offset:{
            x: 0,
            y: 0
        },
        nodes : {
            node1: {
                id: "node1",
                type: "output-only",
                position: {
                    x: 0,
                    y: 0
                },
                ports: {
                    port1:{
                        id: "port1",
                        type: "output",
                        properties:{
                            value: "yes"
                        }
                    },
                    port2:{
                        id: "port2",
                        type: "output",
                        properties:{
                            value: "no"
                        }
                    }
                }
            },
            node2 :{
                id: "node2",
                position: {
                    x: 300,
                    y: 100
                },
                type: "input-output",
                ports: {
                    port3 :{
                        id : "port3",
                        type: "output"
                    },
                    port4 :{
                        id : "port4",
                        type: "input"
                    }
                }
            }
        },
        links: {

        },
        selected: {},
        hovered: {}
    });

    let stateActionCallbacks = Object.keys(actions).reduce((obj,key,idx)=>{
        obj[key] = (...args)=>{
            let action = actions[key];
            let newChartTransformer = action(...args);
            let newChart = newChartTransformer(chart);
            updateChart({...chart, ...newChart});
            return newChart;
        };
        return obj;
    },{});
    return(
        <FlowChart
            chart={chart}
            callbacks={stateActionCallbacks}
        />
    )
}

[mkellogg91]

@phlickey 's answer worked for me also wish I would have found it sooner ;( . I modified it a little since I'm using react class components to use setState instead of hooks.

my version of the callback mapping looked like this:

const stateActionCallbacks = Object.keys(actions).reduce((obj, key, idx) => {
      obj[key] = (...args) => {
        let action = actions[key];
        let newChartTransformer = action(...args);
        let newChart = newChartTransformer(this.state.chart);
        this.setState({
          chart: { ...this.state.chart, ...newChart }
        });
        return newChart;
      };
      return obj;
    }, {});

[LucianoGanga]

I'd like to share what I did in order to allow triggering custom functions on certain events:

It needs improvements with the types, as I'm not an expert on that.

  const customCallbacks = useMemo<{ [key: string]: any }>(() => {
    return {
      onNodeClick: ({ nodeId }: { nodeId: string }) => {
        console.log('clicked', nodeId)
        handleNodeClick(nodeId)
      }
    }
  }, [handleNodeClick])

  const stateActionCallbacks = useMemo(() => {
    return Object.entries(actions).reduce(
      (
        acc: { [key: string]: any },
        [actionKey, action]: [string, (...args: any) => any]
      ) => {
        acc[actionKey] = (...args: any) => {
          const newChartTransformer = action(...args)
          const newChart = newChartTransformer(chart)
          if (customCallbacks[actionKey]) {
            customCallbacks[actionKey](...args)
          }
          setChart({ ...newChart })
          return newChart
        }
        return acc
      },
      {}
    ) as IFlowChartCallbacks
  }, [chart, customCallbacks])

Also. I've noticed that having FlowChart inside a component, triggers the rendering on the upper components (as it should do in React).

For that reason and to avoid unnecessary re-rendering, I've put the FlowChart inside a memo before using it in my app. This is how my custom FlowChart component looks like on my project:

import React, { memo, useMemo, useState, useCallback } from 'react'

import * as actions from '@mrblenny/react-flow-chart/src/container/actions'
import { FlowChart, IFlowChartCallbacks } from '@mrblenny/react-flow-chart'

import NodeInner from '../components/NodeInner'

import { chartSimple } from '../chartSimple'

export default memo(({ handleNodeClick }: any) => {
  const [chart, setChart] = useState(chartSimple)

  const NodeInnerCustom = useCallback(
    (props) => <NodeInner {...props} handleNodeClick={handleNodeClick} />,
    [handleNodeClick]
  )

  const customCallbacks = useMemo<{ [key: string]: any }>(() => {
    return {
      onNodeClick: ({ nodeId }: { nodeId: string }) => {
        console.log('Clicked!', nodeId)
        handleNodeClick(nodeId)
      }
    }
  }, [handleNodeClick])

  const stateActionCallbacks = useMemo(() => {
    return Object.entries(actions).reduce(
      (
        acc: { [key: string]: any },
        [actionKey, action]: [string, (...args: any) => any]
      ) => {
        acc[actionKey] = (...args: any) => {
          const newChartTransformer = action(...args)
          const newChart = newChartTransformer(chart)
          if (customCallbacks[actionKey]) {
            customCallbacks[actionKey](...args)
          }
          setChart({ ...newChart })
          return newChart
        }
        return acc
      },
      {}
    ) as IFlowChartCallbacks
  }, [chart, customCallbacks])

  return (
    <FlowChart
      chart={chart}
      callbacks={stateActionCallbacks}
      Components={{
        NodeInner: NodeInnerCustom
      }}
    />
  )
})

Cheers!
Lucho

[v4irajvimu]

Hey @dSecret ,

Have been trying to figure out this example myself today as well. Using the mapValues method from lodash kind of obscures what's really going on under the hood. Basically, what it's doing is mapping the default actions to actions that update the state of the container class.

The example below makes use of state with hooks and shows a little more verbosely how the action callbacks work. If you were using redux, this is where you would dispatch actions.

import React, {useState, useEffect} from "react";
import {FlowChart} from "@mrblenny/react-flow-chart";
import * as actions from "@mrblenny/react-flow-chart/src/container/actions";
export default function ChatEditor(){
    let [chart, updateChart] = useState({
        offset:{
            x: 0,
            y: 0
        },
        nodes : {
            node1: {
                id: "node1",
                type: "output-only",
                position: {
                    x: 0,
                    y: 0
                },
                ports: {
                    port1:{
                        id: "port1",
                        type: "output",
                        properties:{
                            value: "yes"
                        }
                    },
                    port2:{
                        id: "port2",
                        type: "output",
                        properties:{
                            value: "no"
                        }
                    }
                }
            },
            node2 :{
                id: "node2",
                position: {
                    x: 300,
                    y: 100
                },
                type: "input-output",
                ports: {
                    port3 :{
                        id : "port3",
                        type: "output"
                    },
                    port4 :{
                        id : "port4",
                        type: "input"
                    }
                }
            }
        },
        links: {

        },
        selected: {},
        hovered: {}
    });

    let stateActionCallbacks = Object.keys(actions).reduce((obj,key,idx)=>{
        obj[key] = (...args)=>{
            let action = actions[key];
            let newChartTransformer = action(...args);
            let newChart = newChartTransformer(chart);
            updateChart({...chart, ...newChart});
            return newChart;
        };
        return obj;
    },{});
    return(
        <FlowChart
            chart={chart}
            callbacks={stateActionCallbacks}
        />
    )
}

this worked for me. thanks.