refactor(store): use store.setState directly instead of actions

src/hooks/useGlobalKeyHandler.ts

@@ -12,8 +12,6 @@ interface HookParams {
 }
 
 const selector = (s: ReactFlowState) => ({
-  setNodesSelectionActive: s.setNodesSelectionActive,
-  setMultiSelectionActive: s.setMultiSelectionActive,
   resetSelectedElements: s.resetSelectedElements,
   onNodesChange: s.onNodesChange,
   onEdgesChange: s.onEdgesChange,
@@ -21,8 +19,7 @@ const selector = (s: ReactFlowState) => ({
 
 export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
   const store = useStoreApi();
-  const { setNodesSelectionActive, setMultiSelectionActive, resetSelectedElements, onNodesChange, onEdgesChange } =
-    useStore(selector, shallow);
+  const { resetSelectedElements, onNodesChange, onEdgesChange } = useStore(selector, shallow);
 
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
   const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
@@ -46,12 +43,13 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
       onNodesChange?.(nodeChanges);
       onEdgesChange?.(edgeChanges);
 
-      setNodesSelectionActive(false);
+      store.setState({ nodesSelectionActive: false });
+
       resetSelectedElements();
     }
   }, [deleteKeyPressed, onNodesChange, onEdgesChange]);
 
   useEffect(() => {
-    setMultiSelectionActive(multiSelectionKeyPressed);
+    store.setState({ multiSelectionActive: multiSelectionKeyPressed });
   }, [multiSelectionKeyPressed]);
 };

src/hooks/useResizeHandler.ts

@@ -1,13 +1,10 @@
 import { useEffect, MutableRefObject } from 'react';
 
-import { useStore } from '../store';
+import { useStoreApi } from '../store';
 import { getDimensions } from '../utils';
-import { ReactFlowState } from '../types';
-
-const updateSizeSelector = (state: ReactFlowState) => state.updateSize;
 
 function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>): void {
-  const updateSize = useStore(updateSizeSelector);
+  const store = useStoreApi();
 
   useEffect(() => {
     let resizeObserver: ResizeObserver;
@@ -23,7 +20,7 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
         console.warn('The React Flow parent container needs a width and a height to render the graph.');
       }
 
-      updateSize(size);
+      store.setState({ width: size.width || 500, height: size.height || 500 });
     };
 
     updateDimensions();

src/hooks/useUpdateNodeInternals.ts

@@ -3,10 +3,10 @@ import { useCallback } from 'react';
 import { useStore } from '../store';
 import { UpdateNodeInternals, ReactFlowState } from '../types';
 
-const updateNodeDimsSelector = (state: ReactFlowState) => state.updateNodeDimensions;
+const selector = (state: ReactFlowState) => state.updateNodeDimensions;
 
 function useUpdateNodeInternals(): UpdateNodeInternals {
-  const updateNodeDimensions = useStore(updateNodeDimsSelector);
+  const updateNodeDimensions = useStore(selector);
 
   return useCallback<UpdateNodeInternals>((id: string) => {
     const nodeElement = document.querySelector(`.react-flow__node[data-id="${id}"]`) as HTMLDivElement;