src/components/App.js
// machine is raw state machine, will run it with the interpreter
machine is raw state machine, will run it with the interpreter
machine is raw state machine will run it with the interpreter
useMachineExHelper(machine, { debug = false, name = '', interpreterOptions = {} }) {
    const machineRef = machine.ref;
    let serviceRef = interpret(machineRef, interpreterOptions) 
      .onTransition(state => {
        if (state.event.type === 'xstate.init') {
          return;
        }
        if (state.changed === false && debug === true) {
          console.error(
            `\n\n💣💣💣 [UNHANDLED EVENT][useMachine]💣💣💣\nEvent=`,
            state.event,
            '\nState=',
            state.value, state,
            '\nContext=',
            state.context,
            '\n\n');
          return;
        }
        if (debug === true) {
          console.group(`%c[useMachine ${name}]`, 'color: darkblue');
          this.dumpState(state.value);
          this.dumpState(state.context);
          this.dumpState(state.event);
          console.log('ctx=', state.context);
          console.log('evt=', state.event);
          console.log('\n',);
          console.groupEnd();
        }
         re-render if the state changed
        this.setState({ count: this.state.count + 1 });
        force(x => x + 1)
      });
     start immediately, as it's in the constructor
    serviceRef.start();
     didMount
     useEffect(() => {
       return () => {
         console.log('useMachine unload')
         serviceRef.current.stop()
       }
     }, [])
    return { 'id': machine.id, 'state': serviceRef.state, 'send': serviceRef.send, 'ref': serviceRef };
  }
useMachineExHelper ( machine , { debug = false , name = '' , interpreterOptions = { } } ) { const machineRef = machine . ref ; let serviceRef = interpret ( machineRef , interpreterOptions ) . onTransition ( state => { if ( state . event . type === 'xstate.init' ) { return ; } if ( state . changed === false && debug === true ) { console . error ( ` \n \n state . event , '\nState=' , state . value , state , '\nContext=' , state . context , '\n\n' ) ; return ; } if ( debug === true ) { console . group ( ` ${ name } ` , 'color: darkblue' ) ; this . dumpState ( state . value ) ; this . dumpState ( state . event ) ; console . log ( 'ctx=' , state . context ) ; console . log ( 'evt=' , state . event ) ; console . log ( '\n' , ) ; console . groupEnd ( ) ; } this . setState ( { count : this . state . count + 1 } ) ; } ) ; serviceRef . start ( ) ; return { 'id' : machine . id , 'state' : serviceRef . state , 'send' : serviceRef . send , 'ref' : serviceRef } ; }
machine is raw state machine, will run it with the interpreter
machine is raw state machine will run it with the interpreter
// eslint-disable-next-line //const [_, force] = useState(0) // started Interpreter // debugger	// // //this.dumpState(state.context); // re-render if the state changed //force(x => x + 1) // start immediately, as it's in the constructor // didMount // useEffect(() => { //   return () => { //     console.log('useMachine unload') //     serviceRef.current.stop() //   } // }, [])