const Toggler = () => { const [state, send] = useMachine(toggleMachine); return ( <button onClick={() => send('TOGGLE')}> {state.value === 'inactive' ? 'Click to activate' : 'Active! Click to deactivate'} </button> ); }
const App = () => { const [state, send] = useMachine(TodosMachine, { devTools: true }) return ( <MachineContext.Provider value={[state, send]}> <AddTodo onSubmit={(todo) => send({ type: 'ADD_TODO', todo })}></AddTodo> <VisibleTodoList /> <Footer /> </MachineContext.Provider> ) }
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> ) }
className={[!current.matches("blank") && "has-text"]} onChange={e => { send("SEARCH_CHANGED", { search: e.target.value }); }} value={current.context.search}
send(ADD); .then(user => send(ADD_SUCCESS, { user })) .catch(() => send(ADD_FAILURE)); }; send(REMOVE); .then(() => send(REMOVE_SUCCESS, { user })) .catch(() => send(REMOVE_FAILURE)); }; useEffect(() => { if (shouldFetch) { send(LOAD); .then(users => send(LOAD_SUCCESS, { users })) .catch(() => send(LOAD_FAILURE));
</tbody> </table> <button onClick={() => send({ type: 'DOWN' })}>Down</button> <button onClick={() => send({ type: 'JUMP' })}>Jump</button> <button onClick={() => send({ type: 'ATTACK' })} disabled={state.value.equipment === 'unarmed'} <button onClick={() => send({ type: state.value.equipment === 'unarmed' ? 'EQUIP' : 'UNEQUIP', })
const Toggler = () => { const [state, send] = useMachine(toggleMachine); return ( <button onClick={() => send('TOGGLE')}> {state.value === 'inactive' ? 'Click to activate' : 'Active! Click to deactivate'} </button> ); }
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> ) }
</tbody> </table> <button onClick={() => send({ type: 'DOWN' })}>Down</button> <button onClick={() => send({ type: 'JUMP' })}>Jump</button> <button onClick={() => send({ type: 'ATTACK' })} disabled={state.value.equipment === 'unarmed'} <button onClick={() => send({ type: state.value.equipment === 'unarmed' ? 'EQUIP' : 'UNEQUIP', })