Statechart doc example

xstate-getting-started.md

Thinking in State Charts

1. Determine your states
2. Determine your events
3. Determine your side effects (resulting changes in state)

You can store information in two ways:

• State nodes (each state node can have one value)
• Context (can hold arbitrary values because js object)

Naming Guidelines

States: these are things which have happened.

• camelCase
• not capitalized
• Past-tense. This is a state that's been transitioned to.

note: these have no Redux equivalent

Examples:

• closed
• opened

Events: these are what cause changes to happen. Consider them declared intent. If not namespaced:

• All upcase
• Separated by _
• Imperative. Fill in the sentence: "Please ____".

Examples:

• OPEN
• TOGGLE_VIEWALL
• CLOSE

However, sometimes it's extremely nice to add organization to events, or even add identifying information. If namespaced:

• All upcase word
• Namespace <-> action delimited with .
• Imperatively named section like a browser event, camelcased and uncaptialized

Examples:

• FULFILL.promise<id>
• SELECT.addSelection
• CONFIGURE.removeSelection

note: these can be considered Redux actions

Actions: these are "side effects," or logic that's executed as a result of events occuring.

• camelCase
• uncapitalized
• imperative

Examples:

• activate
• resetPagination
• clearSelectedOptions

note: these can be considered logic which occurs inside Redux reducers

How they fit together

Take a very common UI concept - whether a given component is opened or closed.

• State: OPENED - will be the past-tense version of the concept
• Event: OPEN || NAMESPACE.open - will be the upcased/imperative version of the concept
• Action: open - will be the uncapitalized camelCase version of the concept