Creating small application code

We will learn how to create a small app. Our example app is a to-do app. Valtio is unopinionated about how to structure apps. This is one of the typical patterns.

Let's look at how a to-do app can be structured. First, we define the Todo type:

type Todo = {
  id: string;
  title: string;
  done: boolean;
};

A Todo item has an id string value, a title string value, and a done Boolean value.

We then define a state object using the defined Todo type:

const state = proxy<{ todos: Todo[] }>({
  todos: [],
});

The state object is created by wrapping an initial object with proxy.

To manipulate the state object, we define some helper functions – addTodo to add a new to-do item, removeTodo to remove it, and toggleTodo to toggle the done status:

const createTodo = (title: string) => {
  state.todos.push({
    id: nanoid(),
    ...