diff --git a/README.md b/README.md index 60ab97f..af51552 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). -_1140 TILs and counting..._ +_1141 TILs and counting..._ --- @@ -1336,6 +1336,7 @@ _1140 TILs and counting..._ - [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) +- [Simple States And Composite States](xstate/simple-states-and-composite-states.md) - [Use An XState Machine With React](xstate/use-an-xstate-machine-with-react.md) ### YAML diff --git a/xstate/simple-states-and-composite-states.md b/xstate/simple-states-and-composite-states.md new file mode 100644 index 0000000..4d3d890 --- /dev/null +++ b/xstate/simple-states-and-composite-states.md @@ -0,0 +1,52 @@ +# Simple States And Composite States + +XState allows you to build [hierarchical state +machines](https://xstate.js.org/docs/guides/hierarchical.html). A hierarchical +state machine is one where there are substates nested under states. + +States with nothing nested under them are _simple states_. States that have +substates are _composite states_. + +```javascript +const machine = createMachine({ + // Starting State + initial: "active", + // Starting Context + context: { count: 0 }, + // States + states: { + inactive: { + always: { target: "active" }, + }, + active: { + on: { + SWITCH_COUNT_DIRECTION: { + actions: ["logSwitch", "consoleLogSwitch"], + }, + COUNT: { + actions: "changeCount", + }, + }, + initial: "increment", + states: { + increment: { + on: { + SWITCH_COUNT_DIRECTION: "decrement", + }, + }, + decrement: { + on: { + SWITCH_COUNT_DIRECTION: "increment", + }, + }, + }, + }, + }, +}); +``` + +- The `inactive` state is a _simple state_. There is nothing nested under it. +- The `active` state is a _composite state_. There are two substates + (`increment` and `decrement`) nested under it. +- The `increment` and `decrement` states are both _simple states_. Nothing is + nested under them.