refactor(actions): use createAction util function

src/store/action-types.ts

@@ -1,293 +0,0 @@
-import {
-  OnConnectFunc,
-  OnConnectStartFunc,
-  OnConnectStopFunc,
-  OnConnectEndFunc,
-  Dimensions,
-  Elements,
-  NodePosUpdate,
-  NodeDiffUpdate,
-  Transform,
-  TranslateExtent,
-  XYPosition,
-  SnapGrid,
-  ConnectionMode,
-  SetConnectionId,
-  NodeDimensionUpdate,
-  InitD3ZoomPayload,
-} from '../types';
-
-export const SET_ON_CONNECT = 'SET_ON_CONNECT';
-export const SET_ON_CONNECT_START = 'SET_ON_CONNECT_START';
-export const SET_ON_CONNECT_STOP = 'SET_ON_CONNECT_STOP';
-export const SET_ON_CONNECT_END = 'SET_ON_CONNECT_END';
-export const SET_ELEMENTS = 'SET_ELEMENTS';
-export const BATCH_UPDATE_NODE_DIMENSIONS = 'BATCH_UPDATE_NODE_DIMENSIONS';
-export const UPDATE_NODE_DIMENSIONS = 'UPDATE_NODE_DIMENSIONS';
-export const UPDATE_NODE_POS = 'UPDATE_NODE_POS';
-export const UPDATE_NODE_POS_DIFF = 'UPDATE_NODE_POS_DIFF';
-export const SET_USER_SELECTION = 'SET_USER_SELECTION';
-export const UPDATE_USER_SELECTION = 'UPDATE_USER_SELECTION';
-export const UNSET_USER_SELECTION = 'UNSET_USER_SELECTION';
-export const SET_SELECTION = 'SET_SELECTION';
-export const UNSET_NODES_SELECTION = 'UNSET_NODES_SELECTION';
-export const SET_SELECTED_ELEMENTS = 'SET_SELECTED_ELEMENTS';
-export const RESET_SELECTED_ELEMENTS = 'RESET_SELECTED_ELEMENTS';
-export const ADD_SELECTED_ELEMENTS = 'ADD_SELECTED_ELEMENTS';
-export const UPDATE_TRANSFORM = 'UPDATE_TRANSFORM';
-export const UPDATE_SIZE = 'UPDATE_SIZE';
-export const INIT_D3ZOOM = 'INIT_D3ZOOM';
-export const SET_MINZOOM = 'SET_MINZOOM';
-export const SET_MAXZOOM = 'SET_MAXZOOM';
-export const SET_TRANSLATEEXTENT = 'SET_TRANSLATEEXTENT';
-export const SET_CONNECTION_POSITION = 'SET_CONNECTION_POSITION';
-export const SET_CONNECTION_NODEID = 'SET_CONNECTION_NODEID';
-export const SET_SNAPTOGRID = 'SET_SNAPTOGRID';
-export const SET_SNAPGRID = 'SET_SNAPGRID';
-export const SET_INTERACTIVE = 'SET_INTERACTIVE';
-export const SET_NODES_DRAGGABLE = 'SET_NODES_DRAGGABLE';
-export const SET_NODES_CONNECTABLE = 'SET_NODES_CONNECTABLE';
-export const SET_ELEMENTS_SELECTABLE = 'SET_ELEMENTS_SELECTABLE';
-export const SET_MULTI_SELECTION_ACTIVE = 'SET_MULTI_SELECTION_ACTIVE';
-export const SET_CONNECTION_MODE = 'SET_CONNECTION_MODE';
-
-interface OnConnectAction {
-  type: typeof SET_ON_CONNECT;
-  payload: {
-    onConnect: OnConnectFunc;
-  };
-}
-
-interface OnConnectStartAction {
-  type: typeof SET_ON_CONNECT_START;
-  payload: {
-    onConnectStart: OnConnectStartFunc;
-  };
-}
-
-interface OnConnectStopAction {
-  type: typeof SET_ON_CONNECT_STOP;
-  payload: {
-    onConnectStop: OnConnectStopFunc;
-  };
-}
-
-interface OnConnectEndAction {
-  type: typeof SET_ON_CONNECT_END;
-  payload: {
-    onConnectEnd: OnConnectEndFunc;
-  };
-}
-
-interface SetElementsAction {
-  type: typeof SET_ELEMENTS;
-  elements: Elements;
-}
-
-interface BatchUpdateNodeDimensions {
-  type: typeof BATCH_UPDATE_NODE_DIMENSIONS;
-  updates: NodeDimensionUpdate[];
-}
-
-interface UpdateNodeDimensions {
-  type: typeof UPDATE_NODE_DIMENSIONS;
-  payload: NodeDimensionUpdate;
-}
-
-interface UpdateNodePos {
-  type: typeof UPDATE_NODE_POS;
-  payload: NodePosUpdate;
-}
-
-interface UpdateNodePosDiff {
-  type: typeof UPDATE_NODE_POS_DIFF;
-  payload: NodeDiffUpdate;
-}
-
-interface SetUserSelection {
-  type: typeof SET_USER_SELECTION;
-  mousePos: XYPosition;
-}
-
-interface UpdateUserSelection {
-  type: typeof UPDATE_USER_SELECTION;
-  mousePos: XYPosition;
-}
-
-interface UnsetUserSelection {
-  type: typeof UNSET_USER_SELECTION;
-}
-
-interface SetSelection {
-  type: typeof SET_SELECTION;
-  payload: {
-    selectionActive: boolean;
-  };
-}
-
-interface UnsetNodesSelection {
-  type: typeof UNSET_NODES_SELECTION;
-  payload: {
-    nodesSelectionActive: boolean;
-  };
-}
-
-interface ResetSelectedElements {
-  type: typeof RESET_SELECTED_ELEMENTS;
-  payload: {
-    selectedElements: Elements | null;
-  };
-}
-
-interface SetSelectedElements {
-  type: typeof SET_SELECTED_ELEMENTS;
-  elements: Elements;
-}
-
-interface AddSelectedElements {
-  type: typeof ADD_SELECTED_ELEMENTS;
-  elements: Elements;
-}
-
-interface UpdateTransform {
-  type: typeof UPDATE_TRANSFORM;
-  payload: {
-    transform: Transform;
-  };
-}
-
-interface UpdateSize {
-  type: typeof UPDATE_SIZE;
-  payload: Dimensions;
-}
-
-interface InitD3Zoom {
-  type: typeof INIT_D3ZOOM;
-  payload: InitD3ZoomPayload;
-}
-
-interface SetMinZoom {
-  type: typeof SET_MINZOOM;
-  payload: {
-    minZoom: number;
-  };
-}
-
-interface SetMaxZoom {
-  type: typeof SET_MAXZOOM;
-  payload: {
-    maxZoom: number;
-  };
-}
-
-interface SetTranslateExtent {
-  type: typeof SET_TRANSLATEEXTENT;
-  payload: {
-    translateExtent: TranslateExtent;
-  };
-}
-
-interface SetConnectionPosition {
-  type: typeof SET_CONNECTION_POSITION;
-  payload: {
-    connectionPosition: XYPosition;
-  };
-}
-
-interface SetConnectionNodeId {
-  type: typeof SET_CONNECTION_NODEID;
-  payload: SetConnectionId;
-}
-
-interface SetSnapToGrid {
-  type: typeof SET_SNAPTOGRID;
-  payload: {
-    snapToGrid: boolean;
-  };
-}
-
-interface SetSnapGrid {
-  type: typeof SET_SNAPGRID;
-  payload: {
-    snapGrid: SnapGrid;
-  };
-}
-
-interface SetInteractive {
-  type: typeof SET_INTERACTIVE;
-  payload: {
-    nodesDraggable: boolean;
-    nodesConnectable: boolean;
-    elementsSelectable: boolean;
-  };
-}
-
-interface SetNodesDraggable {
-  type: typeof SET_NODES_DRAGGABLE;
-  payload: {
-    nodesDraggable: boolean;
-  };
-}
-
-interface SetNodesConnectable {
-  type: typeof SET_NODES_CONNECTABLE;
-  payload: {
-    nodesConnectable: boolean;
-  };
-}
-
-interface SetElementsSelectable {
-  type: typeof SET_ELEMENTS_SELECTABLE;
-  payload: {
-    elementsSelectable: boolean;
-  };
-}
-
-interface SetMultiSelectionActive {
-  type: typeof SET_MULTI_SELECTION_ACTIVE;
-  payload: {
-    multiSelectionActive: boolean;
-  };
-}
-
-interface SetConnectionMode {
-  type: typeof SET_CONNECTION_MODE;
-  payload: {
-    connectionMode: ConnectionMode;
-  };
-}
-
-export type ReactFlowActionTypes =
-  | OnConnectAction
-  | OnConnectStartAction
-  | OnConnectStopAction
-  | OnConnectEndAction
-  | SetElementsAction
-  | 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/actions.ts

@@ -1,3 +1,5 @@
+import { createAction } from './utils';
+
 import {
   Elements,
   OnConnectEndFunc,
@@ -18,7 +20,6 @@ import {
 } from '../types';
 
 import {
-  ReactFlowActionTypes,
   SET_ON_CONNECT,
   SET_ON_CONNECT_START,
   SET_ON_CONNECT_STOP,
@@ -30,6 +31,7 @@ import {
   UPDATE_NODE_POS_DIFF,
   SET_USER_SELECTION,
   UNSET_USER_SELECTION,
+  UPDATE_USER_SELECTION,
   SET_SELECTION,
   UNSET_NODES_SELECTION,
   RESET_SELECTED_ELEMENTS,
@@ -51,191 +53,143 @@ import {
   SET_ELEMENTS_SELECTABLE,
   SET_MULTI_SELECTION_ACTIVE,
   SET_CONNECTION_MODE,
-} from './action-types';
+} from './contants';
 
-export const setOnConnect = (onConnect: OnConnectFunc): ReactFlowActionTypes => ({
-  type: SET_ON_CONNECT,
-  payload: {
+export const setOnConnect = (onConnect: OnConnectFunc) =>
+  createAction(SET_ON_CONNECT, {
     onConnect,
-  },
-});
+  });
 
-export const setOnConnectStart = (onConnectStart: OnConnectStartFunc): ReactFlowActionTypes => ({
-  type: SET_ON_CONNECT_START,
-  payload: {
+export const setOnConnectStart = (onConnectStart: OnConnectStartFunc) =>
+  createAction(SET_ON_CONNECT_START, {
     onConnectStart,
-  },
-});
+  });
 
-export const setOnConnectStop = (onConnectStop: OnConnectStopFunc): ReactFlowActionTypes => ({
-  type: SET_ON_CONNECT_STOP,
-  payload: {
+export const setOnConnectStop = (onConnectStop: OnConnectStopFunc) =>
+  createAction(SET_ON_CONNECT_STOP, {
     onConnectStop,
-  },
-});
+  });
 
-export const setOnConnectEnd = (onConnectEnd: OnConnectEndFunc): ReactFlowActionTypes => ({
-  type: SET_ON_CONNECT_END,
-  payload: {
+export const setOnConnectEnd = (onConnectEnd: OnConnectEndFunc) =>
+  createAction(SET_ON_CONNECT_END, {
     onConnectEnd,
-  },
-});
+  });
 
-export const setElements = (elements: Elements): ReactFlowActionTypes => ({
-  type: SET_ELEMENTS,
-  elements,
-});
+export const setElements = (elements: Elements) => createAction(SET_ELEMENTS, elements);
 
-export const batchUpdateNodeDimensions = (updates: NodeDimensionUpdate[]): ReactFlowActionTypes => ({
-  type: BATCH_UPDATE_NODE_DIMENSIONS,
-  updates,
-});
+export const batchUpdateNodeDimensions = (updates: NodeDimensionUpdate[]) =>
+  createAction(BATCH_UPDATE_NODE_DIMENSIONS, updates);
 
-export const updateNodeDimensions = (payload: NodeDimensionUpdate): ReactFlowActionTypes => ({
-  type: UPDATE_NODE_DIMENSIONS,
-  payload,
-});
+export const updateNodeDimensions = (payload: NodeDimensionUpdate) => createAction(UPDATE_NODE_DIMENSIONS, payload);
 
-export const updateNodePos = (payload: NodePosUpdate): ReactFlowActionTypes => ({
-  type: UPDATE_NODE_POS,
-  payload,
-});
+export const updateNodePos = (payload: NodePosUpdate) => createAction(UPDATE_NODE_POS, payload);
 
-export const updateNodePosDiff = (payload: NodeDiffUpdate): ReactFlowActionTypes => ({
-  type: UPDATE_NODE_POS_DIFF,
-  payload,
-});
+export const updateNodePosDiff = (payload: NodeDiffUpdate) => createAction(UPDATE_NODE_POS_DIFF, payload);
 
-export const setUserSelection = (mousePos: XYPosition): ReactFlowActionTypes => ({
-  type: SET_USER_SELECTION,
-  mousePos,
-});
+export const setUserSelection = (mousePos: XYPosition) => createAction(SET_USER_SELECTION, mousePos);
 
-export const updateUserSelection = (mousePos: XYPosition): ReactFlowActionTypes => ({
-  type: SET_USER_SELECTION,
-  mousePos,
-});
+export const updateUserSelection = (mousePos: XYPosition) => createAction(UPDATE_USER_SELECTION, mousePos);
 
-export const unsetUserSelection = (): ReactFlowActionTypes => ({
-  type: UNSET_USER_SELECTION,
-});
+export const unsetUserSelection = () => createAction(UNSET_USER_SELECTION);
 
-export const setSelection = (selectionActive: boolean): ReactFlowActionTypes => ({
-  type: SET_SELECTION,
-  payload: {
+export const setSelection = (selectionActive: boolean) =>
+  createAction(SET_SELECTION, {
     selectionActive,
-  },
-});
+  });
 
-export const unsetNodesSelection = (): ReactFlowActionTypes => ({
-  type: UNSET_NODES_SELECTION,
-  payload: {
+export const unsetNodesSelection = () =>
+  createAction(UNSET_NODES_SELECTION, {
     nodesSelectionActive: false,
-  },
-});
+  });
 
-export const resetSelectedElements = (): ReactFlowActionTypes => ({
-  type: RESET_SELECTED_ELEMENTS,
-  payload: {
+export const resetSelectedElements = () =>
+  createAction(RESET_SELECTED_ELEMENTS, {
     selectedElements: null,
-  },
-});
+  });
 
-export const setSelectedElements = (elements: Elements): ReactFlowActionTypes => ({
-  type: SET_SELECTED_ELEMENTS,
-  elements,
-});
+export const setSelectedElements = (elements: Elements) => createAction(SET_SELECTED_ELEMENTS, elements);
 
-export const addSelectedElements = (elements: Elements): ReactFlowActionTypes => ({
-  type: ADD_SELECTED_ELEMENTS,
-  elements,
-});
+export const addSelectedElements = (elements: Elements) => createAction(ADD_SELECTED_ELEMENTS, elements);
 
-export const updateTransform = (transform: Transform): ReactFlowActionTypes => ({
-  type: UPDATE_TRANSFORM,
-  payload: {
-    transform,
-  },
-});
+export const updateTransform = (transform: Transform) => createAction(UPDATE_TRANSFORM, { transform });
 
-export const updateSize = (size: Dimensions): ReactFlowActionTypes => ({
-  type: UPDATE_SIZE,
-  payload: {
+export const updateSize = (size: Dimensions) =>
+  createAction(UPDATE_SIZE, {
     width: size.width || 500,
     height: size.height || 500,
-  },
-});
+  });
 
-export const initD3Zoom = (payload: InitD3ZoomPayload): ReactFlowActionTypes => ({
-  type: INIT_D3ZOOM,
-  payload,
-});
+export const initD3Zoom = (payload: InitD3ZoomPayload) => createAction(INIT_D3ZOOM, payload);
 
-export const setMinZoom = (minZoom: number): ReactFlowActionTypes => ({
-  type: SET_MINZOOM,
-  payload: { minZoom },
-});
+export const setMinZoom = (minZoom: number) => createAction(SET_MINZOOM, minZoom);
 
-export const setMaxZoom = (maxZoom: number): ReactFlowActionTypes => ({
-  type: SET_MAXZOOM,
-  payload: { maxZoom },
-});
+export const setMaxZoom = (maxZoom: number) => createAction(SET_MAXZOOM, maxZoom);
 
-export const setTranslateExtent = (translateExtent: TranslateExtent): ReactFlowActionTypes => ({
-  type: SET_TRANSLATEEXTENT,
-  payload: { translateExtent },
-});
+export const setTranslateExtent = (translateExtent: TranslateExtent) =>
+  createAction(SET_TRANSLATEEXTENT, translateExtent);
 
-export const setConnectionPosition = (connectionPosition: XYPosition): ReactFlowActionTypes => ({
-  type: SET_CONNECTION_POSITION,
-  payload: { connectionPosition },
-});
+export const setConnectionPosition = (connectionPosition: XYPosition) =>
+  createAction(SET_CONNECTION_POSITION, { connectionPosition });
 
-export const setConnectionNodeId = (payload: SetConnectionId): ReactFlowActionTypes => ({
-  type: SET_CONNECTION_NODEID,
-  payload,
-});
+export const setConnectionNodeId = (payload: SetConnectionId) => createAction(SET_CONNECTION_NODEID, payload);
 
-export const setSnapToGrid = (snapToGrid: boolean): ReactFlowActionTypes => ({
-  type: SET_SNAPTOGRID,
-  payload: { snapToGrid },
-});
+export const setSnapToGrid = (snapToGrid: boolean) => createAction(SET_SNAPTOGRID, { snapToGrid });
 
-export const setSnapGrid = (snapGrid: SnapGrid): ReactFlowActionTypes => ({
-  type: SET_SNAPGRID,
-  payload: { snapGrid },
-});
+export const setSnapGrid = (snapGrid: SnapGrid) => createAction(SET_SNAPGRID, { snapGrid });
 
-export const setInteractive = (isInteractive: boolean): ReactFlowActionTypes => ({
-  type: SET_INTERACTIVE,
-  payload: {
+export const setInteractive = (isInteractive: boolean) =>
+  createAction(SET_INTERACTIVE, {
     nodesDraggable: isInteractive,
     nodesConnectable: isInteractive,
     elementsSelectable: isInteractive,
-  },
-});
+  });
 
-export const setNodesDraggable = (nodesDraggable: boolean): ReactFlowActionTypes => ({
-  type: SET_NODES_DRAGGABLE,
-  payload: { nodesDraggable },
-});
+export const setNodesDraggable = (nodesDraggable: boolean) => createAction(SET_NODES_DRAGGABLE, { nodesDraggable });
 
-export const setNodesConnectable = (nodesConnectable: boolean): ReactFlowActionTypes => ({
-  type: SET_NODES_CONNECTABLE,
-  payload: { nodesConnectable },
-});
+export const setNodesConnectable = (nodesConnectable: boolean) =>
+  createAction(SET_NODES_CONNECTABLE, { nodesConnectable });
 
-export const setElementsSelectable = (elementsSelectable: boolean): ReactFlowActionTypes => ({
-  type: SET_ELEMENTS_SELECTABLE,
-  payload: { elementsSelectable },
-});
+export const setElementsSelectable = (elementsSelectable: boolean) =>
+  createAction(SET_ELEMENTS_SELECTABLE, { elementsSelectable });
 
-export const setMultiSelectionActive = (multiSelectionActive: boolean): ReactFlowActionTypes => ({
-  type: SET_MULTI_SELECTION_ACTIVE,
-  payload: { multiSelectionActive },
-});
+export const setMultiSelectionActive = (multiSelectionActive: boolean) =>
+  createAction(SET_MULTI_SELECTION_ACTIVE, { multiSelectionActive });
 
-export const setConnectionMode = (connectionMode: ConnectionMode): ReactFlowActionTypes => ({
-  type: SET_CONNECTION_MODE,
-  payload: { connectionMode },
-});
+export const setConnectionMode = (connectionMode: ConnectionMode) =>
+  createAction(SET_CONNECTION_MODE, { connectionMode });
+
+export type ReactFlowAction = ReturnType<
+  | typeof setOnConnect
+  | typeof setOnConnectStart
+  | typeof setOnConnectStop
+  | typeof setOnConnectEnd
+  | typeof setElements
+  | typeof batchUpdateNodeDimensions
+  | typeof updateNodeDimensions
+  | typeof updateNodePos
+  | typeof updateNodePosDiff
+  | typeof setUserSelection
+  | typeof updateUserSelection
+  | typeof unsetUserSelection
+  | typeof setSelection
+  | typeof unsetNodesSelection
+  | typeof resetSelectedElements
+  | typeof setSelectedElements
+  | typeof addSelectedElements
+  | typeof updateTransform
+  | typeof updateSize
+  | typeof initD3Zoom
+  | typeof setMinZoom
+  | typeof setMaxZoom
+  | typeof setTranslateExtent
+  | typeof setConnectionPosition
+  | typeof setConnectionNodeId
+  | typeof setSnapToGrid
+  | typeof setSnapGrid
+  | typeof setInteractive
+  | typeof setNodesDraggable
+  | typeof setNodesConnectable
+  | typeof setElementsSelectable
+  | typeof setMultiSelectionActive
+  | typeof setConnectionMode
+>;

src/store/configure-store.ts

@@ -2,9 +2,10 @@ import { applyMiddleware, compose, createStore, Store } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 
 import { ReactFlowState } from '../types';
+import { ReactFlowAction } from './actions';
 import reactFlowReducer from './reducer';
 
-export default function configureStore(preloadedState: ReactFlowState): Store<ReactFlowState> {
+export default function configureStore(preloadedState: ReactFlowState): Store<ReactFlowState, ReactFlowAction> {
   const composedEnhancers = compose(applyMiddleware(thunkMiddleware));
   const store = createStore(reactFlowReducer, preloadedState, composedEnhancers);
 

src/store/contants.ts

@@ -0,0 +1,33 @@
+export const SET_ON_CONNECT = 'SET_ON_CONNECT';
+export const SET_ON_CONNECT_START = 'SET_ON_CONNECT_START';
+export const SET_ON_CONNECT_STOP = 'SET_ON_CONNECT_STOP';
+export const SET_ON_CONNECT_END = 'SET_ON_CONNECT_END';
+export const SET_ELEMENTS = 'SET_ELEMENTS';
+export const BATCH_UPDATE_NODE_DIMENSIONS = 'BATCH_UPDATE_NODE_DIMENSIONS';
+export const UPDATE_NODE_DIMENSIONS = 'UPDATE_NODE_DIMENSIONS';
+export const UPDATE_NODE_POS = 'UPDATE_NODE_POS';
+export const UPDATE_NODE_POS_DIFF = 'UPDATE_NODE_POS_DIFF';
+export const SET_USER_SELECTION = 'SET_USER_SELECTION';
+export const UPDATE_USER_SELECTION = 'UPDATE_USER_SELECTION';
+export const UNSET_USER_SELECTION = 'UNSET_USER_SELECTION';
+export const SET_SELECTION = 'SET_SELECTION';
+export const UNSET_NODES_SELECTION = 'UNSET_NODES_SELECTION';
+export const SET_SELECTED_ELEMENTS = 'SET_SELECTED_ELEMENTS';
+export const RESET_SELECTED_ELEMENTS = 'RESET_SELECTED_ELEMENTS';
+export const ADD_SELECTED_ELEMENTS = 'ADD_SELECTED_ELEMENTS';
+export const UPDATE_TRANSFORM = 'UPDATE_TRANSFORM';
+export const UPDATE_SIZE = 'UPDATE_SIZE';
+export const INIT_D3ZOOM = 'INIT_D3ZOOM';
+export const SET_MINZOOM = 'SET_MINZOOM';
+export const SET_MAXZOOM = 'SET_MAXZOOM';
+export const SET_TRANSLATEEXTENT = 'SET_TRANSLATEEXTENT';
+export const SET_CONNECTION_POSITION = 'SET_CONNECTION_POSITION';
+export const SET_CONNECTION_NODEID = 'SET_CONNECTION_NODEID';
+export const SET_SNAPTOGRID = 'SET_SNAPTOGRID';
+export const SET_SNAPGRID = 'SET_SNAPGRID';
+export const SET_INTERACTIVE = 'SET_INTERACTIVE';
+export const SET_NODES_DRAGGABLE = 'SET_NODES_DRAGGABLE';
+export const SET_NODES_CONNECTABLE = 'SET_NODES_CONNECTABLE';
+export const SET_ELEMENTS_SELECTABLE = 'SET_ELEMENTS_SELECTABLE';
+export const SET_MULTI_SELECTION_ACTIVE = 'SET_MULTI_SELECTION_ACTIVE';
+export const SET_CONNECTION_MODE = 'SET_CONNECTION_MODE';

src/store/hooks.ts

@@ -1,18 +1,24 @@
 import { bindActionCreators, Store } from 'redux';
-import { useStore as useStoreRedux, useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux';
+import {
+  useStore as useStoreRedux,
+  useSelector,
+  useDispatch as reduxUseDispatch,
+  TypedUseSelectorHook,
+} from 'react-redux';
 import { useMemo } from 'react';
 
-import { AppDispatch } from './index';
+import { ReactFlowDispatch } from './index';
 import * as actions from './actions';
+import { ReactFlowAction } from './actions';
 import { ReactFlowState } from '../types';
 
 export const useTypedSelector: TypedUseSelectorHook<ReactFlowState> = useSelector;
 
 export function useActions(actionSelector: (value: any) => any): any {
-  const dispatch: AppDispatch = useDispatch();
+  const dispatch: ReactFlowDispatch = reduxUseDispatch();
 
   const action = useMemo(() => {
-    const currAction = actionSelector(actions);
+    const currAction: any = actionSelector(actions);
     return bindActionCreators(currAction, dispatch);
   }, [dispatch, actionSelector]);
 
@@ -21,7 +27,8 @@ export function useActions(actionSelector: (value: any) => any): any {
 
 export const useStoreActions = useActions;
 export const useStoreState = useTypedSelector;
-export const useStore = (): Store<ReactFlowState, any> => {
-  const store = useStoreRedux<ReactFlowState, any>();
+export const useStore = (): Store<ReactFlowState, ReactFlowAction> => {
+  const store = useStoreRedux<ReactFlowState, ReactFlowAction>();
   return store;
 };
+export const useDispatch: ReactFlowDispatch = reduxUseDispatch;

src/store/index.ts

@@ -55,6 +55,6 @@ export const initialState: ReactFlowState = {
 
 const store = configureStore(initialState);
 
-export type AppDispatch = typeof store.dispatch;
+export type ReactFlowDispatch = typeof store.dispatch;
 
 export default store;

src/store/reducer.ts

@@ -6,7 +6,6 @@ import { getHandleBounds } from '../components/Nodes/utils';
 
 import { ReactFlowState, FlowElement, Node, XYPosition } from '../types';
 import {
-  ReactFlowActionTypes,
   ADD_SELECTED_ELEMENTS,
   BATCH_UPDATE_NODE_DIMENSIONS,
   INIT_D3ZOOM,
@@ -38,14 +37,15 @@ import {
   UPDATE_SIZE,
   UPDATE_TRANSFORM,
   UPDATE_USER_SELECTION,
-} from './action-types';
+} from './contants';
+import { ReactFlowAction } from './actions';
 
 import { initialState } from './index';
 
-export default function reactFlowReducer(state = initialState, action: ReactFlowActionTypes): ReactFlowState {
+export default function reactFlowReducer(state = initialState, action: ReactFlowAction): ReactFlowState {
   switch (action.type) {
     case SET_ELEMENTS: {
-      const propElements = action.elements;
+      const propElements = action.payload;
 
       const nextElements = propElements.map((el: FlowElement) => {
         let storeElement = state.elements.find((se) => se.id === el.id);
@@ -90,7 +90,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
     }
     case BATCH_UPDATE_NODE_DIMENSIONS: {
       const updatedElements = state.elements.map((el) => {
-        const update = action.updates.find((u) => u.id === el.id);
+        const update = action.payload.find((u) => u.id === el.id);
         if (update) {
           const dimensions = getDimensions(update.nodeElement);
           const nodeToUpdate = el as Node;
@@ -212,7 +212,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
       return { ...state, elements: nextElements };
     }
     case SET_USER_SELECTION: {
-      const { mousePos } = action;
+      const mousePos = action.payload;
 
       const userSelectionRect = {
         width: 0,
@@ -231,7 +231,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
       };
     }
     case UPDATE_USER_SELECTION: {
-      const { mousePos } = action;
+      const mousePos = action.payload;
       const startX = state.userSelectionRect.startX || 0;
       const startY = state.userSelectionRect.startY || 0;
 
@@ -298,7 +298,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
       };
     }
     case SET_SELECTED_ELEMENTS: {
-      const { elements } = action;
+      const elements = action.payload;
       const selectedElementsArr = Array.isArray(elements) ? elements : [elements];
       const selectedElementsUpdated = !isEqual(selectedElementsArr, state.selectedElements);
       const selectedElements = selectedElementsUpdated ? selectedElementsArr : state.selectedElements;
@@ -310,7 +310,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
     }
     case ADD_SELECTED_ELEMENTS: {
       const { multiSelectionActive, selectedElements } = state;
-      const { elements } = action;
+      const elements = action.payload;
       const selectedElementsArr = Array.isArray(elements) ? elements : [elements];
 
       let nextElements = selectedElementsArr;
@@ -336,7 +336,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
       };
     }
     case SET_MINZOOM: {
-      const { minZoom } = action.payload;
+      const minZoom = action.payload;
 
       if (state.d3Zoom) {
         state.d3Zoom.scaleExtent([minZoom, state.maxZoom]);
@@ -349,7 +349,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
     }
 
     case SET_MAXZOOM: {
-      const { maxZoom } = action.payload;
+      const maxZoom = action.payload;
 
       if (state.d3Zoom) {
         state.d3Zoom.scaleExtent([state.minZoom, maxZoom]);
@@ -361,7 +361,7 @@ export default function reactFlowReducer(state = initialState, action: ReactFlow
       };
     }
     case SET_TRANSLATEEXTENT: {
-      const { translateExtent } = action.payload;
+      const translateExtent = action.payload;
 
       if (state.d3Zoom) {
         state.d3Zoom.translateExtent(translateExtent);

src/store/utils.ts

@@ -0,0 +1,5 @@
+export function createAction<T extends string>(type: T): { type: T };
+export function createAction<T extends string, P extends any>(type: T, payload: P): { type: T; payload: P };
+export function createAction(type: string, payload?: any) {
+  return { type, payload };
+}