Generated by XState Viz: https://xstate.js.org/viz

machine.js

const todoMachine = Machine({
    id: 'todoMachine',
    initial: 'fetch',
    context: {
      todos: null
    },
    states: {
        idle: {
            on: {
                FETCH: 'fetch',
                DELETE: 'delete',
                ADD: 'add'
            }
        },
        fetch: {
            key: 'fetch',
            id: 'fetch',
            initial: 'start',
            states: {
                start: {
                    invoke: {
                        src: 'fetchTodos',
                        onDone: {
                            target: '#todoMachine.idle',
                            actions: assign({
                                todos: 'todos'
                            })
                        },
                        onError: 'fail'

                    }
                },
                fail: {
                  on: {
                    RETRY: 'start',
                    CANCEL: '#todoMachine.idle'
                  }
                }

            },
            success: {
                on: {
                    ADD: '#add',
                    DELETE: '#delete'
                }
            },
            failure: {
                on: {
                    TRY_AGAIN: 'start'
                }
            }
        },
        add: {
            key: 'add',
            id: 'add',
            initial: 'start',
            states: {
                start: {
                    invoke: {
                        src: 'addTodo',
                        onDone: {
                            target: '#todoMachine.idle',
                            actions: assign({
                                todos: 'todos'
                            })
                        }

                    }
                }

            },
            success: {
                on: {
                    ADD: '#add',
                    DELETE: '#delete'
                }
            },
            failure: {
                on: {
                    TRY_AGAIN: 'start'
                }
            }
        },
        delete: {
            key: 'delete',
            id: 'delete',
            initial: 'start',
            states: {
                start: {
                    invoke: {
                        src: 'deleteTodo',
                        onDone: {
                            target: '#todoMachine.idle',
                            actions: assign({
                                todos: 'todos'
                            })
                        }

                    }
                }

            },
            success: {
                on: {
                    ADD: '#add',
                    DELETE: '#delete'
                }
            },
            failure: {
                on: {
                    TRY_AGAIN: 'start'
                }
            }
        }
    }
})