TodoView.tsx

export function TodoView() {
    const state = useState<State>(State.PENDING)
        
    const handleCreateTask(e: React.SyntheticEvent) {
        // TODO
    }

    return <div>
        <ol>
            {tasks.map((task) => <Task task={task} />)}
        </ol>
        <TaskForm handleCreateTask={handleCreateTask} />
    </div>
}

TodoViewModel.ts

export class TodoViewModel {
    constructor(
        private readolny todoApi: TodoApi,
    ) {}

    @observable public state: State = State.PENDING
    @observable public tasks: ITask[] = []

    @asyncAction
    public *fetchTasks() {
        this.state = State.PENDING
        
        try {
            const res = yield todoApi.fetchTasks(task)
            this.todos = res.data
            this.state = State.DONE
            return Result.ok()
        } catch (e) {
            this.state = State.ERROR
            return Result.fail(e)
        }
    }

    @asyncAction
    public *createTask(task: ITask) {
        // TODO
    }
        
    @asyncAction
    public *deleteTask(id: string) {
        // TODO
    }
        
    ...
}