Add Inline Actions vs Actions In Machine Options as an XState til

Author: jbranchaud

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_1136 TILs and counting..._
+_1137 TILs and counting..._
 
 ---
 
@@ -1332,6 +1332,7 @@ _1136 TILs and counting..._
 ### XState
 
 - [Define Event That Does Internal Self Transition](xstate/define-event-that-does-internal-self-transition.md)
+- [Inline Actions vs Actions In Machine Options](xstate/inline-actions-vs-actions-in-machine-options.md)
 - [Use An XState Machine With React](xstate/use-an-xstate-machine-with-react.md)
 
 ### YAML

xstate/inline-actions-vs-actions-in-machine-options.md

@@ -0,0 +1,61 @@
+# Inline Actions vs Actions In Machine Options
+
+When first spec'ing out a machine, I find it easiest to add my on-transition
+actions directly inline.
+
+```javascript
+const countingMachine = createMachine({
+  initial: "counting",
+  context: { count: 0 },
+  states: {
+    counting: {
+      on: {
+        INCREMENT: {
+          actions: assign({
+            count: (context) => context.count + 1,
+          }),
+        },
+      },
+    },
+  },
+});
+```
+
+This is not what the XState docs recommend once you move beyond prototyping
+your machine.
+
+> It is not recommended to keep the machine config like this in production
+> code, as this makes it difficult to debug, serialize, test, and accurately
+> visualize actions.
+
+When you're ready, you can refactor this by referencing the action by name and
+then moving the action declaration to the `actions` object of the machine
+options (second argument to `createMachine`).
+
+```javascript
+const countingMachine = createMachine({
+  initial: "counting",
+  context: { count: 0 },
+  states: {
+    counting: {
+      on: {
+        INCREMENT: {
+          actions: 'incrementCount',
+        },
+      },
+    },
+  },
+},
+{
+  actions: {
+    incrementCount: assign({
+      count: (context) => context.count + 1,
+    }),
+  },
+});
+```
+
+When the machine interpreter sees `'incrementCount'`, it knows to look for an
+action by that name in the machine options.
+
+[source](https://xstate.js.org/docs/guides/actions.html)