Todos - Basic
A step by step guide to create a Todos application with ConanJs
In ConanJs we wanted to be original, and we have decided to start showing how to build a list of Todos in our first tutorial. We will then go a bit further than other frameworks do, and will show how we can add Asynchronous calls and optimistic updates.
The code for this example is available at GitHub:
and you can also check this code sandbox at the bottom of this page.
If you are coming from Redux, you might want to see how this compares to the TODO from Redux, if that is the case, have a look at this article:
Initial steps
Adding ConanJs to the project
In the project root, just run:
Implementing the Todos app
Domain model
Our examples are in typescript, if you use javascript, you can just ignore the type definitions and it will all work just fine on your end.
The following interfaces are to define with Typescript the domain for the application.
Our data structure for this example will be very straightforward, simply having a Todo, TodoList and status entities. We will also model the visibility filters as:
Creating the Todos state
To create the state we will use Conan.state as we will need to pass our custom reducers later on. The data part of our state will be represented by the TodoListData, which holds an array of Todos and a current applied filter. We are initially just passing one reducer to add a Todo to the current array of todos.
Let's add our newly defined state to Conan Dependency Injection, so that is accesible from all the app.
Connecting the state
To use our new reducer and add a Todo, we just need to connect our presentation components with Conan state. For a guide on the different ways of connecting the state please visit Using the State
For this example we will use Conan HOC StateConnect:
As we have added our state to Conan DI, we can just use it with diContext.todoListState
Adding a Todo
To add a Todo, TodoListRenderer can now make use of our state data and actions. It can now include the AddTodo component and pass the action addTodo created by ConanJs, from the reducer we created before: