> For the complete documentation index, see [llms.txt](https://docs.conanjs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.conanjs.io/tutorials/conan-state-demos/todos/todos-async.md).

# Todos - Async

### Introduction

State management usually gets very complicated when we need to build a realistic app, that for instance needs to make calls to a server API, therefore it needs to integrate the state with asynchronous calls. For this example we will use Conan's *autoBind* feature, which is fully described under [Conan asynchronous state](broken://pages/-M9sjuF--Cq3HxHBZoZM)

### Adding async calls

Let's say our Todo app needs to make an API call to fetch the current todos, and to add and toggle a todo. We could easily think of embedding that logic in its own service class. We could model that as:

{% tabs %}
{% tab title="Js" %}

```javascript
export class TodoListServiceImpl {
    fetch() {
        return Asaps.delayed([{ description: 'test', id: '-1', status: ToDoStatus.PENDING }], 500, 'fetch');
    }
    addTodo(todo) {
        return Asaps.delayed(todo, 5000, 'addTodo');
    }
    toggleTodo(todo) {
        return Asaps.delayed(todo, 1000, 'toggleTodo');
    }
}
```

{% endtab %}

{% tab title="Ts" %}

```typescript
export interface TodoListService {
    fetch(): Asap<ToDo[]>;

    addTodo(todo: ToDo): Asap<ToDo>;

    toggleTodo(todo: ToDo): Asap<ToDo>;
}

export class TodoListServiceImpl implements TodoListService {
    public fetch(): Asap<ToDo[]> {
        return Asaps.delayed([{description: 'test', id: '-1', status: ToDoStatus.PENDING}], 500, 'fetch');
    }

    public addTodo(todo: ToDo): Asap<ToDo> {
        return Asaps.delayed(todo, 5000, 'addTodo');
    }

    public toggleTodo(todo: ToDo): Asap<ToDo> {
        return Asaps.delayed(todo, 1000, 'toggleTodo');
    }
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
We are just simulating the API calls with a delayed Asap
{% endhint %}

{% hint style="success" %}
Note the function names match the reducers names, therefore ConanJs will bind each funcrion with its corresponding reducer
{% endhint %}

### Creating the state

As mentioned above we will be using autoBind, passing the todoListSevice implementation:

{% tabs %}
{% tab title="Js" %}

```javascript
export class TodoListAsyncStateFactory {
    static create(todoListService) {
        return Conan.state({
            name: 'todos-async',
            initialData: {
                appliedFilter: VisibilityFilters.SHOW_ALL,
                todos: []
            },
            reducers: TodoListReducersFn,
            autoBind: todoListService
        });
    }
}
```

{% endtab %}

{% tab title="Ts" %}

```typescript
export class TodoListAsyncStateFactory {
    static create(todoListService: TodoListService): TodoListState {
        return Conan.state<TodoListData, TodoListReducers>({
            name: 'todos-async',
            initialData: {
                appliedFilter: VisibilityFilters.SHOW_ALL,
                todos: []
            },
            reducers: TodoListReducersFn,
            autoBind: todoListService
        })
    }
}
```

{% endtab %}
{% endtabs %}

�As in the Todos example, Conan's DI will hold the definition of the state, but in this example it will instantiate the async one we have just described.

{% tabs %}
{% tab title="Js" %}

```javascript
export let diContext = DiContextFactory.createContext({
    todoListState: TodoListAsyncStateFactory.create,
}, {
    todoListService: TodoListServiceImpl
});
```

{% endtab %}

{% tab title="Ts" %}

```typescript
export let diContext = DiContextFactory.createContext<App, InternalDependencies>({
        todoListState: TodoListAsyncStateFactory.create,
    }, {
        todoListService: TodoListServiceImpl
    },
);
```

{% endtab %}
{% endtabs %}

�This is all that is needed to bring asynchronous behaviour into ConanJs's state, the rest of the code is the same as the simple Todos example.&#x20;

### Getting the code

Please feel free to download the example at:&#x20;

{% embed url="<https://github.com/conan-js/conan-js-examples/tree/master/todo-list-async>" %}

or just play with it in the code sandbox.

### Code sandbox

{% embed url="<https://codesandbox.io/s/o0cxv>" %}
TODOs with async actions
{% endembed %}