TIL:
Link: https://github.com/jbranchaud/til/blob/master/xstate/simple-states-and-composite-states.md
📌 Simple States And Composite States
XState allows you to build hierarchical state. 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.
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.
Link: https://github.com/jbranchaud/til/blob/master/xstate/simple-states-and-composite-states.md
📌 Simple States And Composite States
XState allows you to build hierarchical state. 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.
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.