fix for redux middleware throwing if an unfinished flow was invoked before connecting the middleware

changelog.md

@@ -1,3 +1,4 @@
+-   Fixed redux middleware throwing an error when a flow is called before it is connected [#1065](https://github.com/mobxjs/mobx-state-tree/issues/1065) through [#1079](https://github.com/mobxjs/mobx-state-tree/pull/1079) by [@mkramb](https://github.com/mkramb) and [@xaviergonz](https://github.com/xaviergonz)
 -   Made `addDisposer` return the passed disposer through [#1059](https://github.com/mobxjs/mobx-state-tree/pull/1059) by [@xaviergonz](https://github.com/xaviergonz)
 
 # 3.7.1

packages/mst-middlewares/__tests__/__snapshots__/redux.test.ts.snap

@@ -1,5 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`#1065 - flows in root afterCreate shouldn't crash 1`] = `Array []`;
+
+exports[`#1065 - flows in root afterCreate shouldn't crash 2`] = `
+Array [
+  Array [
+    Object {
+      "args": Array [],
+      "targetTypePath": "Root/SubModel",
+      "type": "[root/sub] *unknownAction*() (?)",
+    },
+    Object {
+      "sub": Object {
+        "num": 1,
+      },
+    },
+  ],
+  Array [
+    Object {
+      "args": Array [],
+      "targetTypePath": "Root/SubModel",
+      "type": "[root/sub] *unknownAction*() (?)",
+    },
+    Object {
+      "sub": Object {
+        "num": 2,
+      },
+    },
+  ],
+]
+`;
+
 exports[`(logIdempotentActionSteps: false, logChildActions: false) applySnapshot(m, { x: "snapshotX" }) 1`] = `
 Array [
   Array [

packages/mst-middlewares/__tests__/redux.test.ts

@@ -295,3 +295,45 @@ test("bourquep", () => {
     store.contents.get("one")!.toggleState()
     expect(devTools.send.mock.calls).toMatchSnapshot()
 })
+
+test("#1065 - flows in root afterCreate shouldn't crash", async () => {
+    const SubModel = types
+        .model("SubModel", {
+            num: 0
+        })
+        .actions(self => {
+            return {
+                someFlow: flow(function*() {
+                    yield waitAsync(50)
+                    self.num++
+                    yield waitAsync(50)
+                    self.num++
+                })
+            }
+        })
+
+    const Root = types
+        .model("Root", {
+            sub: types.optional(SubModel, {})
+        })
+        .actions(self => {
+            return {
+                afterCreate: () => {
+                    self.sub.someFlow()
+                }
+            }
+        })
+
+    const store = Root.create({})
+
+    devTools = mockDevTools()
+    const devToolsManager = { connectViaExtension: () => devTools, extractState: jest.fn() }
+    connectReduxDevtools(devToolsManager, store, {
+        logIdempotentActionSteps: false,
+        logChildActions: false
+    })
+
+    expect(devTools.send.mock.calls).toMatchSnapshot()
+    await waitAsync(200)
+    expect(devTools.send.mock.calls).toMatchSnapshot()
+})

packages/mst-middlewares/src/redux.ts

@@ -71,7 +71,7 @@ interface ActionContext {
     runningAsync: boolean
     errored: boolean
     errorReported: boolean
-    step: number
+    step: number | undefined
     callArgs: any[]
     changesMadeSetter: ChangesMadeSetter | undefined
 }
@@ -91,7 +91,7 @@ function getActionContextNameAndTypePath(actionContext: ActionContext, logArgsNe
     }
 
     if (actionContext.runningAsync) {
-        name += ` (${actionContext.step})`
+        name += ` (${actionContext.step !== undefined ? actionContext.step : "?"})`
     }
 
     if (actionContext.errored) {
@@ -204,33 +204,37 @@ export function connectReduxDevtools(
         }
 
         // if it is an action we need to create a new action context
-        if (call.type === "action") {
+        // and also if there's no context (e.g. the middleware was connected in the middle of an action with a flow)
+        if (call.type === "action" || !context) {
             const targetTypePath = getTargetTypePath(call.context).join("/")
 
             const parentContext = context
+            const path = call.context ? `root${getPath(call.context)}` : "*unknown*"
             context = {
                 // use a space rather than a dot so that the redux devtools move the actions to the next line if there's not enough space
-                name: `[root${getPath(call.context)}] ${call.name}`,
+                name: `[${path}] ${call.name || "*unknownAction*"}`,
                 targetTypePath: targetTypePath,
                 id: call.id,
                 runningAsync: false,
                 errored: false,
                 errorReported: false,
-                step: 0,
+                step: call.type === "action" ? 0 : undefined,
                 callArgs: [],
                 changesMadeSetter: undefined
             }
 
-            if (call.args) {
-                context.callArgs = [...call.args]
-            }
+            if (call.type === "action") {
+                if (call.args) {
+                    context.callArgs = [...call.args]
+                }
 
-            // subaction, assign the parent action context
-            if (call.parentId) {
-                context.parent = parentContext
-            }
+                // subaction, assign the parent action context
+                if (call.parentId) {
+                    context.parent = parentContext
+                }
 
-            actionContexts.set(call.id, context)
+                actionContexts.set(call.id, context)
+            }
         }
 
         let changesMade = false
@@ -310,11 +314,15 @@ export function connectReduxDevtools(
                 }
 
                 // increase the step for logging purposes, as well as any parent steps (since child steps count as a parent step)
-                context.step++
+                if (context.step !== undefined) {
+                    context.step++
+                }
 
                 let parent = context.parent
                 while (parent) {
-                    parent.step++
+                    if (parent.step !== undefined) {
+                        parent.step++
+                    }
                     parent = parent.parent
                 }
             }