fix(hooks): repair useStoreActions hook

example/src/Provider/Sidebar.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import { useStoreState, useStoreActions } from 'react-flow-renderer';
+import { useStoreState, useStoreActions, isNode } from 'react-flow-renderer';
 
 const Sidebar = () => {
-  const nodes = useStoreState((store) => store.nodes);
+  const elements = useStoreState((store) => store.elements);
   const transform = useStoreState((store) => store.transform);
   const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
+  const nodes = elements.filter(isNode);
 
   const selectAll = () => {
     setSelectedElements(nodes.map((node) => ({ id: node.id, type: node.type })));

src/container/NodeRenderer/index.tsx

@@ -52,7 +52,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
         nodeElement: entry.target as HTMLDivElement,
       }));
 
-      batchUpdateNodeDimensions({ updates });
+      batchUpdateNodeDimensions(updates);
     });
   }, []);
 

src/container/ReactFlow/Wrapper.tsx

@@ -1,20 +1,17 @@
-import React, { FC } from 'react';
-import { Provider } from 'react-redux';
+import React, { FC, useContext } from 'react';
+import { Provider, ReactReduxContext } from 'react-redux';
 
 import store from '../../store';
-// import { useStore } from '../../store/hooks';
 
 const Wrapper: FC = ({ children }) => {
-  // const reactFlowStore = useStore();
-  // const isWrapepdWithReactFlowProvider = reactFlowStore?.getState()?.reactFlowVersion;
+  const contextValue = useContext(ReactReduxContext);
+  const isWrappedWithReactFlowProvider = contextValue?.store?.getState()?.reactFlowVersion;
 
-  // console.log(isWrapepdWithReactFlowProvider);
-
-  // if (isWrapepdWithReactFlowProvider) {
-  //   // we need to wrap it with a fragment because t's not allowed for children to be a ReactNode
-  //   // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
-  //   return <>{children}</>;
-  // }
+  if (isWrappedWithReactFlowProvider) {
+    // we need to wrap it with a fragment because t's not allowed for children to be a ReactNode
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
+    return <>{children}</>;
+  }
 
   return <Provider store={store}>{children}</Provider>;
 };

src/hooks/useZoomPanHelper.ts

@@ -3,7 +3,7 @@ import { zoomIdentity } from 'd3-zoom';
 
 import { useStoreState, useStore } from '../store/hooks';
 import { clamp } from '../utils';
-import { getRectOfNodes } from '../utils/graph';
+import { getRectOfNodes, isNode } from '../utils/graph';
 import { FitViewParams, FlowTransform, ZoomPanHelperFunctions, Rect, Transform } from '../types';
 
 const initialZoomPanHelper: ZoomPanHelperFunctions = {
@@ -54,7 +54,8 @@ const usePanZoomHelper = (): ZoomPanHelperFunctions => {
           d3Zoom.transform(d3Selection, nextTransform);
         },
         fitView: (options: FitViewParams = { padding: 0.1 }) => {
-          const { nodes, width, height, minZoom, maxZoom } = store.getState();
+          const { elements, width, height, minZoom, maxZoom } = store.getState();
+          const nodes = elements.filter(isNode);
 
           if (!nodes.length) {
             return;

src/store/action-types.ts

@@ -158,9 +158,7 @@ interface UpdateTransform {
 
 interface UpdateSize {
   type: typeof UPDATE_SIZE;
-  payload: {
-    size: Dimensions;
-  };
+  payload: Dimensions;
 }
 
 interface InitD3Zoom {

src/store/actions.ts

@@ -161,10 +161,8 @@ export const updateTransform = (transform: Transform): ActionTypes => ({
 export const updateSize = (size: Dimensions): ActionTypes => ({
   type: UPDATE_SIZE,
   payload: {
-    size: {
-      width: size.width || 500,
-      height: size.height || 500,
-    },
+    width: size.width || 500,
+    height: size.height || 500,
   },
 });
 
@@ -241,3 +239,39 @@ export const setConnectionMode = (connectionMode: ConnectionMode): ActionTypes =
   type: SET_CONNECTION_MODE,
   payload: { connectionMode },
 });
+
+export const actions = {
+  setOnConnect,
+  setOnConnectStart,
+  setOnConnectStop,
+  setOnConnectEnd,
+  setElements,
+  batchUpdateNodeDimensions,
+  updateNodeDimensions,
+  updateNodePos,
+  updateNodePosDiff,
+  setUserSelection,
+  updateUserSelection,
+  unsetUserSelection,
+  setSelection,
+  unsetNodesSelection,
+  resetSelectedElements,
+  setSelectedElements,
+  addSelectedElements,
+  updateTransform,
+  updateSize,
+  initD3Zoom,
+  setMinZoom,
+  setMaxZoom,
+  setTranslateExtent,
+  setConnectionPosition,
+  setConnectionNodeId,
+  setSnapToGrid,
+  setSnapGrid,
+  setInteractive,
+  setNodesDraggable,
+  setNodesConnectable,
+  setElementsSelectable,
+  setMultiSelectionActive,
+  setConnectionMode,
+};

src/store/hooks.ts

@@ -1,24 +1,19 @@
-import { bindActionCreators, ActionCreatorsMapObject } from 'redux';
+import { bindActionCreators } from 'redux';
 import { useStore as useStoreRedux, useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux';
 import { useMemo } from 'react';
 
 import { ReactFlowState, AppDispatch } from './index';
-import { ActionTypes } from './action-types';
+import { actions } from './actions';
 
 export const useTypedSelector: TypedUseSelectorHook<ReactFlowState> = useSelector;
 
-export function useActions(actions: ActionTypes, deps?: any): ActionTypes {
+export function useActions(actionSelector: any): any {
   const dispatch: AppDispatch = useDispatch();
 
-  const action = useMemo(
-    () => {
-      if (Array.isArray(actions)) {
-        return actions.map((a) => bindActionCreators(a, dispatch));
-      }
-      return bindActionCreators<ActionCreatorsMapObject<ActionTypes>>(actions, dispatch);
-    },
-    deps ? [dispatch, ...deps] : [dispatch]
-  );
+  const action = useMemo(() => {
+    const currAction = actionSelector(actions);
+    return bindActionCreators(currAction, dispatch);
+  }, [dispatch, actionSelector]);
 
   return action;
 }

src/store/index.ts

@@ -306,7 +306,7 @@ export function reactFlowReducer(state = initialState, action: ActionTypes): Rea
                 isDragging,
                 position: {
                   x: el.__rf.position.x + diff.x,
-                  y: el.__rf.position.x + diff.y,
+                  y: el.__rf.position.y + diff.y,
                 },
               },
             };