fix(types)(middleware/devtools): fix action type in devtools's setState

readme.md

@@ -412,6 +412,18 @@ const createBearSlice = (set, get) => ({
 })
 ```
 
+You can also log action's type along with its payload:
+
+```jsx
+const createBearSlice = (set, get) => ({
+  addFishes: (count) =>
+    set((prev) => ({ fishes: prev.fishes + count }), false, {
+      type: 'bear/addFishes',
+      count,
+    }),
+})
+```
+
 If an action type is not provided, it is defaulted to "anonymous". You can customize this default value by providing an `anonymousActionType` parameter:
 
 ```jsx

src/middleware/devtools.ts

@@ -40,11 +40,11 @@ type TakeTwo<T> = T extends []
 type WithDevtools<S> = Write<Cast<S, object>, StoreDevtools<S>>
 
 type StoreDevtools<S> = S extends {
-  setState: (...a: infer A) => infer Sr
+  setState: (...a: infer Sa) => infer Sr
 }
   ? {
-      setState(
-        ...a: [...a: TakeTwo<A>, actionType?: string | { type: unknown }]
+      setState<A extends string | { type: unknown }>(
+        ...a: [...a: TakeTwo<Sa>, action?: A]
       ): Sr
     }
   : never

tests/devtools.test.tsx

@@ -80,18 +80,29 @@ describe('If there is no extension installed...', () => {
 })
 
 describe('When state changes...', () => {
-  it("sends { type: setStateName || 'anonymous` } as the action with current state", () => {
+  it("sends { type: setStateName || 'anonymous`, ...rest } as the action with current state", () => {
     const api = create(
       devtools(() => ({ count: 0, foo: 'bar' }), {
         name: 'testOptionsName',
         enabled: true,
       })
     )
+
     api.setState({ count: 10 }, false, 'testSetStateName')
     expect(extension.send).toHaveBeenLastCalledWith(
       { type: 'testSetStateName' },
       { count: 10, foo: 'bar' }
     )
+
+    api.setState({ count: 15 }, false, {
+      type: 'testSetStateName',
+      payload: 15,
+    })
+    expect(extension.send).toHaveBeenLastCalledWith(
+      { type: 'testSetStateName', payload: 15 },
+      { count: 15, foo: 'bar' }
+    )
+
     api.setState({ count: 5, foo: 'baz' }, true)
     expect(extension.send).toHaveBeenLastCalledWith(
       { type: 'anonymous' },

tests/middlewareTypes.test.tsx

@@ -1,4 +1,4 @@
-import create, { StoreApi } from 'zustand'
+import create, { StoreApi, UseBoundStore } from 'zustand'
 import {
   combine,
   devtools,
@@ -259,18 +259,53 @@ describe('counter state spec (double middleware)', () => {
     __DEV__ = savedDEV
   })
 
-  it('devtools & immer', () => {
+  it('immer & devtools', () => {
     __DEV__ = false
     const useBoundStore = create<CounterState>()(
-      devtools(
-        immer((set, get) => ({
-          count: 0,
-          inc: () =>
-            set((state) => {
-              state.count = get().count + 1
-            }),
-        })),
-        { name: 'prefix' }
+      immer(
+        devtools(
+          (set, get) => ({
+            count: 0,
+            inc: () =>
+              set((state) => {
+                state.count = get().count + 1
+              }),
+          }),
+          { name: 'prefix' }
+        )
+      )
+    )
+    const TestComponent = () => {
+      useBoundStore((s) => s.count) * 2
+      useBoundStore((s) => s.inc)()
+      useBoundStore().count * 2
+      useBoundStore().inc()
+      useBoundStore.getState().count * 2
+      useBoundStore.getState().inc()
+      useBoundStore.setState({ count: 0 }, false, 'reset')
+      return <></>
+    }
+    TestComponent
+  })
+
+  it('immer & devtools, action with type and payload', () => {
+    __DEV__ = false
+    const useBoundStore = create<CounterState>()(
+      immer(
+        devtools(
+          (set, get) => ({
+            count: 0,
+            inc: () =>
+              set(
+                (state) => {
+                  state.count = get().count + 1
+                },
+                false,
+                { type: 'inc', by: 1 }
+              ),
+          }),
+          { name: 'prefix' }
+        )
       )
     )
     const TestComponent = () => {