Handling structured data
An example that deals with a set of numbers is fairly easy. In reality, we need to handle objects, arrays, and a combination of them. Let's learn how to use Zustand by covering another example. This is a well-known Todo app example. It's an app where you can do the following things:
- Create a new Todo item.
- See the list of Todo items.
- Toggle a Todo item's done status.
- Remove a Todo item.
First, we must define some types before creating a store. The following is the type definition for a Todo object. It has the id, title, and done properties:
type Todo = {
id: number;
title: string;
done: boolean;
};
Now, the StoreState type can be defined with Todo. The value part of the store is todos, which is a list of Todo items. In addition to this, there are three functions – addTodo, removeTodo, and toggleTodo – that can be used to manipulate the todos property:
type StoreState...