diff --git a/README.md b/README.md index 5ca27f2..66e4ae2 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). -_1135 TILs and counting..._ +_1136 TILs and counting..._ --- @@ -1331,6 +1331,7 @@ _1135 TILs and counting..._ ### XState +- [Define Event That Does Internal Self Transition](xstate/define-event-that-does-internal-self-transition.md) - [Use An XState Machine With React](xstate/use-an-xstate-machine-with-react.md) ### YAML diff --git a/xstate/define-event-that-does-internal-self-transition.md b/xstate/define-event-that-does-internal-self-transition.md new file mode 100644 index 0000000..27aa580 --- /dev/null +++ b/xstate/define-event-that-does-internal-self-transition.md @@ -0,0 +1,67 @@ +# Define Event That Does Internal Self Transition + +An XState `state` can contain a state transition in the `on` object that +represents a [_self +transition_](https://xstate.js.org/docs/guides/transitions.html#self-transitions). +A self transition means that the state points to itself. In response to that +event, it will transition directly to itself, instead of to another state node. + +An +[_internal_](https://xstate.js.org/docs/guides/transitions.html#internal-transitions) +self transition is one in which the transition occurs, but it never _exits_ its +state node. That means `entry` and `exit` actions won't be triggered. + +The parent state node can transition directly to itself or to a child node. +Here are a couple ways to define internal self transitions directly to the +parent node. + +1. Implicit + +``` +states: { + counting: { + on: { + INCREMENT: { + actions: ['incrementCount'], + }, + }, + }, +}, +``` + +No `target` is declared for `INCREMENT`, so an internal, self-transition is +implicit. + +2. Explicit + +``` +states: { + counting: { + on: { + INCREMENT: { + internal: true, + actions: ['incrementCount'], + }, + }, + }, +}, +``` + +This says that the transition should be an `internal` one. + +3. Undefined Target + +``` +states: { + counting: { + on: { + INCREMENT: { + target: undefined, + actions: ['incrementCount'], + }, + }, + }, +}, +``` + +An undefined target is an internal, self-transition.