From 835d539108c88f1e761a9ba90949b4bb11865282 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 28 Jan 2021 16:33:53 +0100 Subject: [PATCH] refactor(actions): use createAction util function --- src/store/action-types.ts | 293 ----------------------------------- src/store/actions.ts | 242 ++++++++++++----------------- src/store/configure-store.ts | 3 +- src/store/contants.ts | 33 ++++ src/store/hooks.ts | 19 ++- src/store/index.ts | 2 +- src/store/reducer.ts | 24 +-- src/store/utils.ts | 5 + 8 files changed, 164 insertions(+), 457 deletions(-) delete mode 100644 src/store/action-types.ts create mode 100644 src/store/contants.ts create mode 100644 src/store/utils.ts diff --git a/src/store/action-types.ts b/src/store/action-types.ts deleted file mode 100644 index da5208f9..00000000 --- a/src/store/action-types.ts +++ /dev/null @@ -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; diff --git a/src/store/actions.ts b/src/store/actions.ts index fd08ad24..2e21479d 100644 --- a/src/store/actions.ts +++ b/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 +>; diff --git a/src/store/configure-store.ts b/src/store/configure-store.ts index 718515ce..f50be4d7 100644 --- a/src/store/configure-store.ts +++ b/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 { +export default function configureStore(preloadedState: ReactFlowState): Store { const composedEnhancers = compose(applyMiddleware(thunkMiddleware)); const store = createStore(reactFlowReducer, preloadedState, composedEnhancers); diff --git a/src/store/contants.ts b/src/store/contants.ts new file mode 100644 index 00000000..7129c46c --- /dev/null +++ b/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'; diff --git a/src/store/hooks.ts b/src/store/hooks.ts index fc2bdfad..4deb9b10 100644 --- a/src/store/hooks.ts +++ b/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 = 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 => { - const store = useStoreRedux(); +export const useStore = (): Store => { + const store = useStoreRedux(); return store; }; +export const useDispatch: ReactFlowDispatch = reduxUseDispatch; diff --git a/src/store/index.ts b/src/store/index.ts index f4917c2d..e48162bb 100644 --- a/src/store/index.ts +++ b/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; diff --git a/src/store/reducer.ts b/src/store/reducer.ts index e494b8a1..23b56a69 100644 --- a/src/store/reducer.ts +++ b/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); diff --git a/src/store/utils.ts b/src/store/utils.ts new file mode 100644 index 00000000..c4bfbaf3 --- /dev/null +++ b/src/store/utils.ts @@ -0,0 +1,5 @@ +export function createAction(type: T): { type: T }; +export function createAction(type: T, payload: P): { type: T; payload: P }; +export function createAction(type: string, payload?: any) { + return { type, payload }; +}