setTimeout(() => { if (this.service.state.matches("saving")) { this.setState({ item: { ...this.state.item, ...payload.data } }); } this.service.send("complete"); resolve(); }, 3000);
function Story({ selectedStory }) { const [storyService, sendToStory] = useService(selectedStory); const { story, comments } = storyService.context; return ( <div className=""> <h2>{story.title}</h2> {storyService.matches('loading') && <h3>Loading..</h3>} {comments.map(comment => ( <div key={comment.id}> {comment.text} by {comment.by} </div> ))} </div> ); }
const App = () => { const [state, send] = useMachine(TicTacToeMachine, { devTools: true }) const { turn, board } = state.context return ( <MachineContext.Provider value={[state, send]}> <h1>Tic Tac Toe</h1> <Board board={board} /> {state.matches('playing') && <p>Player {turn} turn</p>} {state.matches('gameOver') && ( <> {cats(board) ? ( <p>Cat's game...</p> ) : ( <p>Player {state.context.turn === 2 ? 1 : 2} Wins!</p> )} <button type="button" onClick={() => send('RESET')}> RESET </button> </> )} </MachineContext.Provider> ) }
<td> {state.value.equipment === 'unarmed' ? 'Unarmed' : 'Armed!'} {state.matches('equipment.weapon.firing') ? 'BANG' : ''} </td> </tr>
id="search" type="text" className={[!current.matches("blank") && "has-text"]} onChange={e => { send("SEARCH_CHANGED", { search: e.target.value }); </div> {current.matches("searching") && ( <h2>Searching for {current.context.search} ...</h2> )} {current.matches("searchResults") && ( <div> <strong> )} {current.matches("searchNoResults") && ( <h2> Sorry, no <code>{current.context.search}</code> was found. )} {current.matches("searchFailure") && ( <pre>{JSON.stringify(current.context.error)}</pre> )}
const App = () => { const [state, send] = useMachine(TicTacToeMachine, { devTools: true }) const { turn, board } = state.context return ( <MachineContext.Provider value={[state, send]}> <h1>Tic Tac Toe</h1> <Board board={board} /> {state.matches('playing') && <p>Player {turn} turn</p>} {state.matches('gameOver') && ( <> {cats(board) ? ( <p>Cat's game...</p> ) : ( <p>Player {state.context.turn === 2 ? 1 : 2} Wins!</p> )} <button type="button" onClick={() => send('RESET')}> RESET </button> </> )} </MachineContext.Provider> ) }
<td> {state.value.equipment === 'unarmed' ? 'Unarmed' : 'Armed!'} {state.matches('equipment.weapon.firing') ? 'BANG' : ''} </td> </tr>