https://github.com/traviskn/react-state-machine

a demo of using state machines with react.js
https://github.com/traviskn/react-state-machine

Last synced: 20 days ago
JSON representation

a demo of using state machines with react.js

• Host: GitHub
• URL: https://github.com/traviskn/react-state-machine
• Owner: Traviskn
• Created: 2017-12-04T04:22:41.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-04T04:23:06.000Z (about 7 years ago)
• Last Synced: 2024-11-12T23:35:33.321Z (3 months ago)
• Language: JavaScript
• Size: 69.3 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Finite State Machine

Components to build UI with state machines

Inspired by:

David Khourshid's Talk: https://youtu.be/VU1NKX6Qkxc

Ryan Florence's proof of concept: https://youtu.be/MkdV2-U16tc

## Usage

### App State

- Defined as a plain JS Object

- Driven by [xstate](https://github.com/davidkpiano/xstate) Machine

- Define state keys as constant 'state types'

- Define transitions as constant 'transition types'

### App Data or Model

- Data lives outside the app state

- Can be gathered/modified/displayed at potentially any app state

- Data is managed by redux-style reducer

- Pass data into state transitions to be captured by reducer

### Side Effects

- Async side effects such as API Calls can be simply executed in componentDidMount lifecycle hooks

- Potential for redux-style middleware as well

### Living Documentation

- App state can be visualized in a graph form

- Serves as an always-up-to-date documentation of your app