fix asyncAction for devTools

MrWangJustToDo · Nov 22, 2023 · 08de976 · 08de976
1 parent 3cea285
commit 08de976
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 12 deletions.
diff --git a/app/.vitepress/theme/components/createStateWithActionsMiddleware.vue b/app/.vitepress/theme/components/createStateWithActionsMiddleware.vue
@@ -11,7 +11,7 @@ const useCountState_v2 = createState(withActions(() => ({ count: 1 }), { generat
 
 const useCountState_v3 = createState(withActions(() => ({ count: 1 }), { generateActions: (state) => { return { add: (v) => { console.log(v); state.count++ }, del: () => state.count-- } } }));
 
-const useCountState_v4 = createState(withNamespace(() => ({ count: 1 }), { namespace: 'foo_2', reduxDevTool: true }), { withActions: (state) => { return { add: (v) => { console.log(v); state.count++ }, del: () => state.count-- } }, withNamespace: 'count_4' });
+const useCountState_v4 = createState(withNamespace(() => ({ count: 1 }), { namespace: 'foo_2', reduxDevTool: true }), { withActions: (state) => { return { add: async (v) => { console.log(v); state.count++ }, del: async () => state.count-- } }, withNamespace: 'count_4' });
 
 const App = () => {
   const { count, add } = useCountState_v4();

diff --git a/packages/r-store/package.json b/packages/r-store/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reactivity-store",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "author": "MrWangJustToDo",
   "license": "MIT",
   "description": "a reactive store, make you write reactive logic in react app just like zustand",

diff --git a/packages/r-store/src/shared/dev.ts b/packages/r-store/src/shared/dev.ts
@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-types */
+import { isPromise } from "@vue/shared";
+
 import { isServer } from "./env";
 
 import type { Controller } from "./controller";
@@ -73,8 +75,19 @@ const devToolMap: Record<string, any> = {};
 
 const globalName = "__reactivity-store-redux-devtools__";
 
+const defaultAction = { type: "unknown", getUpdatedState: () => null };
+
+const pendingAction = new Set();
+
+let globalAction: { type: string; $payload?: any; getUpdatedState: () => any } = defaultAction;
+
 let globalDevTools = null;
 
+/**
+ * @internal
+ */
+export const getDevToolInstance = () => globalDevTools || window.__REDUX_DEVTOOLS_EXTENSION__.connect({ name: globalName });
+
 /**
  * @internal
  */
@@ -96,21 +109,24 @@ export const connectDevTool = (name: string, actions: Record<string, Function>,
 
     devTools.init(obj);
 
-    const action = { type: `action/change-${name}` };
+    const action = { type: name };
 
     return Object.keys(actions).reduce((p, c) => {
       p[c] = (...args) => {
-        const re = actions[c](...args);
-        try {
-          const len = actions[c].length || 0;
+        const len = actions[c].length || 0;
 
-          const nextObj = { ...devToolMap, [name]: JSON.parse(JSON.stringify(state)) };
+        globalAction = { ...action, $payload: args.slice(0, len), getUpdatedState: () => ({ ...devToolMap, [name]: JSON.parse(JSON.stringify(state)) }) };
 
-          devTools.send({ ...action, $payload: args.slice(0, len) }, nextObj);
-        } catch (e) {
-          console.log(e);
+        const re = actions[c](...args);
 
-          void 0;
+        if (isPromise(re)) {
+          re.finally(() => {
+            sendToDevTools(true);
+            globalAction = defaultAction;
+          });
+        } else {
+          sendToDevTools(false);
+          globalAction = defaultAction;
         }
         return re;
       };
@@ -120,3 +136,17 @@ export const connectDevTool = (name: string, actions: Record<string, Function>,
     return actions;
   }
 };
+
+/**
+ * @internal
+ */
+export const sendToDevTools = (asyncAction: boolean) => {
+  const { getUpdatedState, type, ...action } = globalAction;
+  try {
+    getDevToolInstance().send({ ...action, type: asyncAction ? `asyncAction/change-${type}` : `syncAction/change-${type}` }, getUpdatedState());
+  } catch (e) {
+    console.log(e);
+  } finally {
+    pendingAction.delete(globalAction);
+  }
+};
diff --git a/packages/r-store/src/state/_internal.ts b/packages/r-store/src/state/_internal.ts
@@ -53,6 +53,8 @@ export function internalCreateState<T extends Record<string, unknown>, P extends
 
   const rawState = toRaw(initialState);
 
+  const reduxDevTool = __DEV__ && namespace.reduxDevTool && !isServer;
+
   if (__DEV__ && checkHasReactive(rawState)) {
     console.error(
       `[reactivity-store] '${name}' expect receive a plain object but got a reactive object/field %o, this is a unexpected usage. should not use 'reactiveApi' in this 'setup' function`,
@@ -74,7 +76,7 @@ export function internalCreateState<T extends Record<string, unknown>, P extends
     );
   }
 
-  if (__DEV__ && namespace.reduxDevTool && !isServer) {
+  if (reduxDevTool) {
     actions = connectDevTool(namespace.namespace, actions, rawState) as P;
   }