> 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.conanjs.io/tutorials/conan-state-demos/todos/todos-async.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.