fix(devtool): add devtool support for createStore

Author: ArrayZoneYour

__test__/middlewares/devToolsListener.spec.ts

@@ -3,8 +3,8 @@
   connect: () => {},
   send: () => {}
 }
-import { renderHook } from '@testing-library/react-hooks'
-import { Model, middlewares } from '../../src'
+import { renderHook, act } from '@testing-library/react-hooks'
+import { Model, middlewares, createStore, useModel } from '../../src'
 import { Counter } from '..'
 
 middlewares.config.devtools.enable = true
@@ -21,4 +21,31 @@ describe('withDevTools', () => {
     await actions.increment(3)
     expect(state.count).toBe(3)
   })
+
+  test('support createStore', () => {
+    const { useStore } = createStore(() => {
+      const [count, setCount] = useModel(1)
+      return { count, setCount }
+    })
+    let renderTimes = 0
+    const { result } = renderHook(() => {
+      const { count, setCount } = useStore()
+      renderTimes += 1
+      return { renderTimes, count, setCount }
+    })
+
+    act(() => {
+      expect(result.current.renderTimes).toEqual(1)
+      expect(result.current.count).toBe(1)
+    })
+
+    act(() => {
+      result.current.setCount(5)
+    })
+
+    act(() => {
+      expect(renderTimes).toEqual(2)
+      expect(result.current.count).toBe(5)
+    })
+  })
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-model",
-  "version": "4.2.0-rc.2",
+  "version": "4.2.1-rc.0",
   "description": "The State management library for React",
   "main": "./dist/react-model.js",
   "module": "./dist/react-model.esm.js",

src/index.tsx

@@ -264,13 +264,6 @@ function Model<M extends Models, MT extends ModelType, E>(
       actions[n] = getActions(name)
     })
 
-    Global.withDevTools =
-      typeof window !== 'undefined' &&
-      (window as any).__REDUX_DEVTOOLS_EXTENSION__
-    if (Global.withDevTools && middlewares.config.devtools.enable) {
-      Global.devTools = (window as any).__REDUX_DEVTOOLS_EXTENSION__
-      Global.devTools.connect()
-    }
     return {
       actions,
       getActions: (name: string) => getActions(prefix + name),

src/middlewares.ts

@@ -168,10 +168,27 @@ const consoleDebugger: Middleware = async (context, restMiddlewares) => {
 const devToolsListener: Middleware = async (context, restMiddlewares) => {
   const { Global } = context
   const ret = await context.next(restMiddlewares)
+  Global.withDevTools =
+    typeof window !== 'undefined' &&
+    (window as any).__REDUX_DEVTOOLS_EXTENSION__
+  if (
+    Global.withDevTools &&
+    middlewares.config.devtools.enable &&
+    !Global.devTools
+  ) {
+    Global.devTools = (window as any).__REDUX_DEVTOOLS_EXTENSION__
+    Global.devTools.connect()
+  }
   if (Global.withDevTools && config.devtools.enable) {
+    const actionName =
+      context.type === 'u' && context.disableSelectorUpdate
+        ? `store[${context.modelName}].update`
+        : `${context.modelName}_${context.actionName}`
     Global.devTools.send(
-      `${context.modelName}_${context.actionName}`,
-      Global.State
+      actionName,
+      Global.mutableState[context.modelName],
+      undefined,
+      context.modelName
     )
   }
   return ret