diff --git a/README.md b/README.md index 66e4ae2..f76540d 100644 --- a/README.md +++ b/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 diff --git a/xstate/inline-actions-vs-actions-in-machine-options.md b/xstate/inline-actions-vs-actions-in-machine-options.md new file mode 100644 index 0000000..0bd908c --- /dev/null +++ b/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)