整理reducer

src/store/actions.ts

@@ -1,5 +1,5 @@
 export enum ActionTypes {
-  AddRect = "addRect",
+  // AddRect = "addRect",
   CreateOverlay = "createOverlay",
   FinishCreateOverlay = "finishCreateOverlay",
 }
@@ -9,11 +9,11 @@ export type CreatedOverlay = {
   type: string;
 };
 export class EditorAction {
-  addRect() {
-    return {
-      type: ActionTypes.AddRect,
-    };
-  }
+  // addRect() {
+  //   return {
+  //     type: ActionTypes.AddRect,
+  //   };
+  // }
   createOverlay(type: string) {
     return {
       type: ActionTypes.CreateOverlay,

src/store/reducers.ts

@@ -1,30 +0,0 @@
-import produce from "immer";
-import { initState } from "./initState";
-import { ActionTypes } from "./actions";
-import { IEditorState, IOverlay } from "./type";
-
-export type Action = {
-  type: ActionTypes;
-  payload?: any;
-};
-
-export function reducer(state = initState, action: Action): IEditorState {
-  const { type, payload } = action;
-  switch (type) {
-    case ActionTypes.CreateOverlay:
-      return produce(state, (draft) => {
-        draft.map.status = "createOverlay";
-        draft.map.overlayType = payload as string;
-      });
-    case ActionTypes.FinishCreateOverlay:
-      return produce(state, (draft) => {
-        const overlay = payload as IOverlay;
-        overlay.name = "测试矩形";
-        draft.map.status = "";
-        draft.map.overlayType = "";
-        draft.map.rectangles = state.map.rectangles.concat([overlay]);
-      });
-    default:
-      return state;
-  }
-}

src/store/reducers/index.ts

@@ -0,0 +1,26 @@
+import { initState } from "../initState";
+import { ActionTypes } from "../actions";
+import { createOverlay, finishCreateOverlay } from "./map";
+import { IEditorState } from "@store";
+
+export type Action = {
+  type: ActionTypes;
+  payload?: any;
+};
+
+type ActionReducer = (state: IEditorState, payload: any) => IEditorState;
+
+const actionReducers: Record<ActionTypes, ActionReducer> = {
+  [ActionTypes.CreateOverlay]: createOverlay,
+  [ActionTypes.FinishCreateOverlay]: finishCreateOverlay,
+  // addRect: undefined
+};
+
+export function reducer(state = initState, action: Action) {
+  const { payload, type } = action;
+  if (type in actionReducers) {
+    return actionReducers[type](state, payload);
+  }
+
+  return state;
+}

src/store/reducers/map/index.ts

@@ -0,0 +1,21 @@
+import produce from "immer";
+import { initState } from "../../initState";
+import { IOverlay } from "@store";
+
+export function createOverlay(state = initState, payload: any) {
+  return produce(state, (draft) => {
+    draft.map.status = "createOverlay";
+    draft.map.overlayType = payload as string;
+  });
+}
+
+export function finishCreateOverlay(state = initState, payload: any) {
+  return produce(state, (draft) => {
+    const overlay = payload as IOverlay;
+    // todo: uniqueName.
+    overlay.name = "矩形" + overlay.id;
+    draft.map.status = "";
+    draft.map.overlayType = "";
+    draft.map.rectangles = state.map.rectangles.concat([overlay]);
+  });
+}