refactor(easy-peasy): return single values from useStoreState

Author: moklick

src/additional-components/Background/index.tsx

@@ -25,11 +25,9 @@ const defaultColors = {
 
 const Background = memo(
   ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style = {}, className = '' }: BackgroundProps) => {
-    const {
-      width,
-      height,
-      transform: [x, y, scale],
-    } = useStoreState((s) => s);
+    const width = useStoreState((s) => s.width);
+    const height = useStoreState((s) => s.height);
+    const [x, y, scale] = useStoreState((s) => s.transform);
 
     const bgClasses = classnames('react-flow__background', className);
     const bgColor = color ? color : defaultColors[variant];

src/additional-components/Controls/index.tsx

@@ -25,7 +25,7 @@ interface ControlProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const Controls = ({ style, showZoom = true, showFitView = true, showInteractive = true, className }: ControlProps) => {
   const setInteractive = useStoreActions((actions) => actions.setInteractive);
-  const { isInteractive } = useStoreState(({ isInteractive }) => ({ isInteractive }));
+  const isInteractive = useStoreState((s) => s.isInteractive);
   const mapClasses: string = classnames('react-flow__controls', className);
 
   return (

src/additional-components/MiniMap/index.tsx

@@ -30,27 +30,23 @@ const MiniMap = ({
   nodeBorderRadius = 5,
   maskColor = 'rgba(10, 10, 10, .25)',
 }: MiniMapProps) => {
-  const state = useStoreState(({ width, height, nodes, transform: [tX, tY, tScale] }) => ({
-    width,
-    height,
-    nodes,
-    tX,
-    tY,
-    tScale,
-  }));
+  const containerWidth = useStoreState((s) => s.width);
+  const containerHeight = useStoreState((s) => s.height);
+  const [tX, tY, tScale] = useStoreState((s) => s.transform);
+  const nodes = useStoreState((s) => s.nodes);
 
   const mapClasses = classnames('react-flow__minimap', className);
   const elementWidth = (style.width || baseStyle.width)! as number;
   const elementHeight = (style.height || baseStyle.height)! as number;
   const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
-  const hasNodes = state.nodes && state.nodes.length;
+  const hasNodes = nodes && nodes.length;
 
-  const bb = getRectOfNodes(state.nodes);
+  const bb = getRectOfNodes(nodes);
   const viewBB: Rect = {
-    x: -state.tX / state.tScale,
-    y: -state.tY / state.tScale,
-    width: state.width / state.tScale,
-    height: state.height / state.tScale,
+    x: -tX / tScale,
+    y: -tY / tScale,
+    width: containerWidth / tScale,
+    height: containerHeight / tScale,
   };
 
   const boundingRect = hasNodes ? getBoundsofRects(bb, viewBB) : viewBB;
@@ -79,7 +75,7 @@ const MiniMap = ({
       }}
       className={mapClasses}
     >
-      {state.nodes.map((node) => (
+      {nodes.map((node) => (
         <MiniMapNode key={node.id} node={node} color={nodeColorFunc(node)} borderRadius={nodeBorderRadius} />
       ))}
       <path

src/components/NodesSelection/index.tsx

@@ -30,30 +30,28 @@ function getStartPositions(nodes: Node[]): StartPositions {
 export default memo(() => {
   const [offset, setOffset] = useState<XYPosition>({ x: 0, y: 0 });
   const [startPositions, setStartPositions] = useState<StartPositions>({});
-  const state = useStoreState((s) => ({
-    transform: s.transform,
-    selectedNodesBbox: s.selectedNodesBbox,
-    selectedElements: s.selectedElements,
-    snapToGrid: s.snapToGrid,
-    snapGrid: s.snapGrid,
-    nodes: s.nodes,
-  }));
+  const [tX, tY, tScale] = useStoreState((s) => s.transform);
+  const selectedNodesBbox = useStoreState((s) => s.selectedNodesBbox);
+  const selectedElements = useStoreState((s) => s.selectedElements);
+  const snapToGrid = useStoreState((s) => s.snapToGrid);
+  const snapGrid = useStoreState((s) => s.snapGrid);
+  const nodes = useStoreState((s) => s.nodes);
+
   const updateNodePos = useStoreActions((a) => a.updateNodePos);
-  const [tx, ty, tScale] = state.transform;
-  const position = state.selectedNodesBbox;
-  const grid = (state.snapToGrid ? state.snapGrid : [1, 1])! as [number, number];
+  const position = selectedNodesBbox;
+  const grid = (snapToGrid ? snapGrid : [1, 1])! as [number, number];
 
   const onStart = (evt: MouseEvent) => {
     const scaledClient: XYPosition = {
       x: evt.clientX / tScale,
       y: evt.clientY / tScale,
     };
-    const offsetX: number = scaledClient.x - position.x - tx;
-    const offsetY: number = scaledClient.y - position.y - ty;
-    const selectedNodes = state.selectedElements
-      ? (state.selectedElements.filter(isNode) as Node[]).map(
-          (selectedNode) => state.nodes.find((node) => node.id === selectedNode.id)! as Node
-        )
+    const offsetX: number = scaledClient.x - position.x - tX;
+    const offsetY: number = scaledClient.y - position.y - tY;
+    const selectedNodes = selectedElements
+      ? selectedElements
+          .filter(isNode)
+          .map((selectedNode) => nodes.find((node) => node.id === selectedNode.id)! as Node)
       : [];
 
     const nextStartPositions = getStartPositions(selectedNodes);
@@ -70,11 +68,11 @@ export default memo(() => {
       y: evt.clientY / tScale,
     };
 
-    if (state.selectedElements) {
-      (state.selectedElements.filter(isNode) as Node[]).forEach((node) => {
+    if (selectedElements) {
+      selectedElements.filter(isNode).forEach((node) => {
         const pos: XYPosition = {
-          x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tx,
-          y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - ty,
+          x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tX,
+          y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - tY,
         };
 
         updateNodePos({ id: node.id, pos });
@@ -86,7 +84,7 @@ export default memo(() => {
     <div
       className="react-flow__nodesselection"
       style={{
-        transform: `translate(${tx}px,${ty}px) scale(${tScale})`,
+        transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
       }}
     >
       <ReactDraggable
@@ -98,10 +96,10 @@ export default memo(() => {
         <div
           className="react-flow__nodesselection-rect"
           style={{
-            width: state.selectedNodesBbox.width,
-            height: state.selectedNodesBbox.height,
-            top: state.selectedNodesBbox.y,
-            left: state.selectedNodesBbox.x,
+            width: selectedNodesBbox.width,
+            height: selectedNodesBbox.height,
+            top: selectedNodesBbox.y,
+            left: selectedNodesBbox.x,
           }}
         />
       </ReactDraggable>

src/container/EdgeRenderer/index.tsx

@@ -187,32 +187,21 @@ function renderEdge(
 }
 
 const EdgeRenderer = memo((props: EdgeRendererProps) => {
-  const {
-    transform,
-    edges,
-    nodes,
-    connectionSourceId,
-    connectionPosition: { x, y },
-    selectedElements,
-    isInteractive,
-  } = useStoreState((s) => ({
-    transform: s.transform,
-    edges: s.edges,
-    nodes: s.nodes,
-    connectionSourceId: s.connectionSourceId,
-    connectionPosition: s.connectionPosition,
-    selectedElements: s.selectedElements,
-    isInteractive: s.isInteractive,
-  }));
+  const [tX, tY, tScale] = useStoreState((s) => s.transform);
+  const edges = useStoreState((s) => s.edges);
+  const nodes = useStoreState((s) => s.nodes);
+  const connectionSourceId = useStoreState((s) => s.connectionSourceId);
+  const connectionPosition = useStoreState((s) => s.connectionPosition);
+  const selectedElements = useStoreState((s) => s.selectedElements);
+  const isInteractive = useStoreState((s) => s.isInteractive);
 
   const { width, height, connectionLineStyle, connectionLineType } = props;
 
   if (!width) {
     return null;
   }
 
-  const [tx, ty, tScale] = transform;
-  const transformStyle = `translate(${tx},${ty}) scale(${tScale})`;
+  const transformStyle = `translate(${tX},${tY}) scale(${tScale})`;
 
   return (
     <svg width={width} height={height} className="react-flow__edges">
@@ -222,9 +211,9 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
           <ConnectionLine
             nodes={nodes}
             connectionSourceId={connectionSourceId}
-            connectionPositionX={x}
-            connectionPositionY={y}
-            transform={transform}
+            connectionPositionX={connectionPosition.x}
+            connectionPositionY={connectionPosition.y}
+            transform={[tX, tY, tScale]}
             connectionLineStyle={connectionLineStyle}
             connectionLineType={connectionLineType}
             isInteractive={isInteractive}

src/container/GraphView/index.tsx

@@ -58,14 +58,11 @@ const GraphView = memo(
   }: GraphViewProps) => {
     const zoomPane = useRef<HTMLDivElement>(null);
     const rendererNode = useRef<HTMLDivElement>(null);
-    const state = useStoreState((s) => ({
-      width: s.width,
-      height: s.height,
-      nodes: s.nodes,
-      edges: s.edges,
-      d3Initialised: s.d3Initialised,
-      nodesSelectionActive: s.nodesSelectionActive,
-    }));
+    const width = useStoreState((s) => s.width);
+    const height = useStoreState((s) => s.height);
+    const d3Initialised = useStoreState((s) => s.d3Initialised);
+    const nodesSelectionActive = useStoreState((s) => s.nodesSelectionActive);
+
     const updateSize = useStoreActions((actions) => actions.updateSize);
     const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
     const setOnConnect = useStoreActions((a) => a.setOnConnect);
@@ -106,15 +103,15 @@ const GraphView = memo(
     useD3Zoom({ zoomPane, onMove, selectionKeyPressed });
 
     useEffect(() => {
-      if (state.d3Initialised && onLoad) {
+      if (d3Initialised && onLoad) {
         onLoad({
           fitView,
           zoomIn,
           zoomOut,
           project,
         });
       }
-    }, [state.d3Initialised, onLoad]);
+    }, [d3Initialised, onLoad]);
 
     useEffect(() => {
       setSnapGrid({ snapToGrid, snapGrid });
@@ -137,15 +134,15 @@ const GraphView = memo(
           onlyRenderVisibleNodes={onlyRenderVisibleNodes}
         />
         <EdgeRenderer
-          width={state.width}
-          height={state.height}
+          width={width}
+          height={height}
           edgeTypes={edgeTypes}
           onElementClick={onElementClick}
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
         />
         {selectionKeyPressed && <UserSelection isInteractive={isInteractive} />}
-        {state.nodesSelectionActive && <NodesSelection />}
+        {nodesSelectionActive && <NodesSelection />}
         <div className="react-flow__zoompane" onClick={onZoomPaneClick} ref={zoomPane} />
       </div>
     );

src/container/NodeRenderer/index.tsx

@@ -49,18 +49,15 @@ function renderNode(
 }
 
 const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRendererProps) => {
-  const { nodes, transform, selectedElements, width, height, isInteractive } = useStoreState((s) => ({
-    nodes: s.nodes,
-    transform: s.transform,
-    selectedElements: s.selectedElements,
-    width: s.width,
-    height: s.height,
-    isInteractive: s.isInteractive,
-  }));
-
-  const [tx, ty, tScale] = transform;
+  const nodes = useStoreState((s) => s.nodes);
+  const transform = useStoreState((s) => s.transform);
+  const selectedElements = useStoreState((s) => s.selectedElements);
+  const width = useStoreState((s) => s.width);
+  const height = useStoreState((s) => s.height);
+  const isInteractive = useStoreState((s) => s.isInteractive);
+  const [tX, tY, tScale] = transform;
   const transformStyle = {
-    transform: `translate(${tx}px,${ty}px) scale(${tScale})`,
+    transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
   };
 
   const renderNodes = onlyRenderVisibleNodes

src/hooks/useD3Zoom.ts

@@ -1,5 +1,5 @@
 import { useEffect, MutableRefObject } from 'react';
-import * as d3Zoom from 'd3-zoom';
+import { zoom, zoomIdentity } from 'd3-zoom';
 import { select, event } from 'd3-selection';
 
 import { useStoreState, useStoreActions } from '../store/hooks';
@@ -10,17 +10,14 @@ interface UseD3ZoomParams {
   onMove?: () => void;
 }
 
-const d3ZoomInstance = d3Zoom
-  .zoom()
+const d3ZoomInstance = zoom()
   .scaleExtent([0.5, 2])
   .filter(() => !event.button);
 
 export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): void => {
-  const state = useStoreState((s) => ({
-    transform: s.transform,
-    d3Selection: s.d3Selection,
-    d3Zoom: s.d3Zoom,
-  }));
+  const transform = useStoreState((s) => s.transform);
+  const d3Selection = useStoreState((s) => s.d3Selection);
+  const d3Zoom = useStoreState((s) => s.d3Zoom);
 
   const initD3 = useStoreActions((actions) => actions.initD3);
   const updateTransform = useStoreActions((actions) => actions.updateTransform);
@@ -48,13 +45,10 @@ export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): voi
         }
       });
 
-      if (state.d3Selection && state.d3Zoom) {
+      if (d3Selection && d3Zoom) {
         // we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
-        const graphTransform = d3Zoom.zoomIdentity
-          .translate(state.transform[0], state.transform[1])
-          .scale(state.transform[2]);
-
-        state.d3Selection.call(state.d3Zoom.transform, graphTransform);
+        const graphTransform = zoomIdentity.translate(transform[0], transform[1]).scale(transform[2]);
+        d3Selection.call(d3Zoom.transform, graphTransform);
       }
     }
 

src/hooks/useElementUpdater.ts

@@ -6,13 +6,8 @@ import { parseElement, isNode, isEdge } from '../utils/graph';
 import { Elements, Node, Edge } from '../types';
 
 const useElementUpdater = (elements: Elements): void => {
-  const state = useStoreState((s) => ({
-    nodes: s.nodes,
-    edges: s.edges,
-    transform: s.transform,
-    snapToGrid: s.snapToGrid,
-    snapGrid: s.snapGrid,
-  }));
+  const stateNodes = useStoreState((s) => s.nodes);
+  const stateEdges = useStoreState((s) => s.edges);
 
   const setNodes = useStoreActions((a) => a.setNodes);
   const setEdges = useStoreActions((a) => a.setEdges);
@@ -22,7 +17,7 @@ const useElementUpdater = (elements: Elements): void => {
     const edges: Edge[] = elements.filter(isEdge).map((e) => parseElement(e) as Edge);
 
     const nextNodes: Node[] = nodes.map((propNode) => {
-      const existingNode = state.nodes.find((n) => n.id === propNode.id);
+      const existingNode = stateNodes.find((n) => n.id === propNode.id);
 
       if (existingNode) {
         const data = !isEqual(existingNode.data, propNode.data)
@@ -59,8 +54,8 @@ const useElementUpdater = (elements: Elements): void => {
       return parseElement(propNode) as Node;
     });
 
-    const nodesChanged: boolean = !isEqual(state.nodes, nextNodes);
-    const edgesChanged: boolean = !isEqual(state.edges, edges);
+    const nodesChanged: boolean = !isEqual(stateNodes, nextNodes);
+    const edgesChanged: boolean = !isEqual(stateEdges, edges);
 
     if (nodesChanged) {
       setNodes(nextNodes);
@@ -69,7 +64,7 @@ const useElementUpdater = (elements: Elements): void => {
     if (edgesChanged) {
       setEdges(edges);
     }
-  }, [elements, state.nodes, state.edges]);
+  }, [elements, stateNodes, stateEdges]);
 };
 
 export default useElementUpdater;