refactor(state): replace redux with zustand

src/hooks/useGlobalKeyHandler.ts

@@ -1,23 +1,27 @@
 import { useEffect } from 'react';
 
-import { useStore, useStoreActions, useStoreState } from '../store/hooks';
+import { useStore, useStoreApi } from '../store';
 import useKeyPress from './useKeyPress';
 import { isNode, isEdge, getConnectedEdges } from '../utils/graph';
-import { KeyCode } from '../types';
+import { KeyCode, ReactFlowState } from '../types';
 
 interface HookParams {
   deleteKeyCode: KeyCode;
   multiSelectionKeyCode: KeyCode;
 }
 
-export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
-  const store = useStore();
+const selector = (s: ReactFlowState) => ({
+  unsetNodesSelection: s.unsetNodesSelection,
+  setMultiSelectionActive: s.setMultiSelectionActive,
+  resetSelectedElements: s.resetSelectedElements,
+  onNodesChange: s.onNodesChange,
+  onEdgesChange: s.onEdgesChange,
+});
 
-  const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
-  const setMultiSelectionActive = useStoreActions((actions) => actions.setMultiSelectionActive);
-  const resetSelectedElements = useStoreActions((actions) => actions.resetSelectedElements);
-  const onNodesChange = useStoreState((state) => state.onNodesChange);
-  const onEdgesChange = useStoreState((state) => state.onEdgesChange);
+export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
+  const store = useStoreApi();
+  const { unsetNodesSelection, setMultiSelectionActive, resetSelectedElements, onNodesChange, onEdgesChange } =
+    useStore(selector);
 
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
   const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);

src/hooks/useResizeHandler.ts

@@ -1,10 +1,13 @@
 import { useEffect, MutableRefObject } from 'react';
-import { useStoreActions } from '../store/hooks';
 
+import { useStore } from '../store';
 import { getDimensions } from '../utils';
+import { ReactFlowState } from '../types';
+
+const updateSizeSelector = (state: ReactFlowState) => state.updateSize;
 
 export default (rendererNode: MutableRefObject<HTMLDivElement | null>) => {
-  const updateSize = useStoreActions((actions) => actions.updateSize);
+  const updateSize = useStore(updateSizeSelector);
 
   useEffect(() => {
     let resizeObserver: ResizeObserver;

src/hooks/useUpdateNodeInternals.ts

@@ -1,13 +1,15 @@
 import { useCallback } from 'react';
 
-import { useStoreActions } from '../store/hooks';
-import { ElementId, UpdateNodeInternals } from '../types';
+import { useStore } from '../store';
+import { ElementId, UpdateNodeInternals, ReactFlowState } from '../types';
+
+const updateNodeDimsSelector = (state: ReactFlowState) => state.updateNodeDimensions;
 
 function useUpdateNodeInternals(): UpdateNodeInternals {
-  const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
+  const updateNodeDimensions = useStore(updateNodeDimsSelector);
 
   return useCallback<UpdateNodeInternals>((id: ElementId) => {
-    const nodeElement = document.querySelector(`.react-flow__node[data-id="${id}"]`);
+    const nodeElement = document.querySelector(`.react-flow__node[data-id="${id}"]`) as HTMLDivElement;
 
     if (nodeElement) {
       updateNodeDimensions([{ id, nodeElement, forceUpdate: true }]);

src/hooks/useZoomPanHelper.ts

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { zoomIdentity } from 'd3-zoom';
 
-import { useStoreState, useStore } from '../store/hooks';
+import { useStoreApi, useStore } from '../store';
 import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils/graph';
-import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, XYPosition } from '../types';
+import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, XYPosition, ReactFlowState } from '../types';
 
 const DEFAULT_PADDING = 0.1;
 
@@ -19,10 +19,14 @@ const initialZoomPanHelper: ZoomPanHelperFunctions = {
   initialized: false,
 };
 
+const selector = (s: ReactFlowState) => ({
+  d3Zoom: s.d3Zoom,
+  d3Selection: s.d3Selection,
+});
+
 const useZoomPanHelper = (): ZoomPanHelperFunctions => {
-  const store = useStore();
-  const d3Zoom = useStoreState((s) => s.d3Zoom);
-  const d3Selection = useStoreState((s) => s.d3Selection);
+  const store = useStoreApi();
+  const { d3Zoom, d3Selection } = useStore(selector);
 
   const zoomPanHelperFunctions = useMemo<ZoomPanHelperFunctions>(() => {
     if (d3Selection && d3Zoom) {