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

* added payload to setState() in devtools middleware

* adjusted tests

* changed payload to any property name

* adjusted docs

* prettier readme.md

* adjusted for extends

* adjusted immer's setState

* Revert "adjusted immer's setState"

This reverts commit 50ce327bf0031a0ec61177b47733f397de036758.

* changed order of immer and devtools in tests

* added test for action with payload type in immer/devtools

* removed unnecessary test

* Update tests/middlewareTypes.test.tsx

Co-authored-by: Daishi Kato <dai-shi@users.noreply.github.com>

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

@@ -259,18 +259,24 @@ 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
+                },
+                false,
+                { type: 'inc', by: 1 }
+              ),
+          }),
+          { name: 'prefix' }
+        )
       )
     )
     const TestComponent = () => {