interpret(authMachine).onTransition(current => { this.setState({ current }); })
transition(previousState, event) { const currentState = this.service.send(event); console.log({ previousState, currentState, event }); return currentState; }
function App () { const [bulbOn, setBulbOn] = useState(false); useEffect(() => { service.onTransition(state => { console.log('Transitioning', state); switch (state.value) { case 'on': setBulbOn(true); break; case 'off': setBulbOn(false); break; case 'broken': setBulbOn(false); break; default: } }); service.start(); }); return ( <div className="App"> <LightBulb checked={bulbOn} /> <section> <button onClick={() => service.send('toggle')} >Turn {bulbOn ? 'Off' : 'On'}</button> <button onClick={() => service.send('break')} >Break Bulb</button> </section> </div> ); }
componentWillUnmount() { this.service.stop(); }
componentDidMount() { this.service.start(); }
interpret(itemMachine).onTransition(current => { this.setState({ current }); })
componentWillUnmount() { this.service.stop(); }