coodoo

{
	id: 'Root',
	initial: 'after map loaded',
	states: {
		'before map loaded': {
			on: {},
			states: {}
		},
		'after map loaded': {
			on: {},

coodoo

The case for statechart and xstate -- why it matters and how we can benefit from it

Bottom line up front

• redux is a global data management tool, not a proper state management tool, hence causing a lot of troubles

• statecharts is an extension to Finite State Machine (FSM) which provides explicit and safe state management capabilities, perfectly fit for front-end development

• statecharts had been used intensivelly in all industries (be it embedded systems, hardware, electronics, aeronautics, automotive, game development and more), it's us front-end developers late to the party

coodoo

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

coodoo

const once = useRef(false)
useEffect(() => {

	if(once.current === false){
		once.current = true
		// do things as were in componentDidMount
		return
	}

coodoo

const T = {
  INT: 'INT',
  SIGN: 'SIGN',
  DOT: 'DOT',
  EXPO: 'EXPO',
  SPACE: 'SPACE',
  INVALID: 'INVALID',
  EMPTY: 'EMPTY',
}

coodoo

Bus App
  idle
    DOOR_OPEN -> loading
  loading
    DOOR_CLOSE -> stopped 
    #要放 cond 因為 close 不代表有放入 cd   
  loadError
    #
  stopped
    ON_EJECT -> idle

coodoo

Bus App
  display
    RELOAD -> loading
  loading
    LOAD_OK -> display
    LOAD_FAIL -> error
  error
    RELOAD -> loading
  

coodoo

Gallery App
  gallery
    SEARCH -> loading
    SELECT_PHOTO -> photo
    RELOAD -> gallery
  loading
    CANCEL -> gallery
    SEARCH_FAILED -> error
    SEARCH_SUCCESS -> gallery
  error

coodoo

import io from 'socket.io-client'
const A = require('automerge')

const foo = bar => {
	bar.map( b => b.title )
}

startConnection() {
	this.socket = io('http://localhost:5000')

coodoo

-- f (x:xs) = case x `elem` xs of
--   True -> f xs
--   False -> x

f s = f' $ map toLower s
  where
    f' (x:xs) =
      case x `elem` xs of
        True -> f' xs
        False -> x