从0死磕全栈第五天：React 使用zustand实现To-Do List项目

代码世界是现实的镜像，状态管理教会我们：真正的控制不在于凝固不变，而在于优雅地引导变化。

这是「从0死磕全栈」系列的第5篇文章，前面我们已经完成了环境搭建、路由配置和基础功能开发。今天，我们将引入一个轻量级但强大的状态管理工具 —— Zustand，来实现一个完整的 TodoList 应用。

---

Zustand 简介

Zustand 是一个轻量级、灵活的 React 状态管理库，以极简 API 解决复杂状态共享问题。

• ✅ 无需 Provider 包裹，直接导入使用
• ✅ 使用 create 创建 store，通过 useStore 随时随地访问状态
• ✅ 支持中间件（如持久化、日志）、异步逻辑
• ✅ 代码简洁易维护，是中小型项目的理想选择

下面我们将用 React + TypeScript + Zustand 实现一个功能完整的 TodoList。

---

要实现的功能

1. 添加待办事项

   • 在输入框中输入内容，点击“添加”按钮或按 Enter 键
   • 新事项添加到列表底部

2. 标记完成/未完成

   • 点击复选框切换完成状态
   • 已完成事项显示删除线样式

3. 删除事项

   • 点击右侧“删除”按钮移除该事项

4. 统计信息

   • 显示总事项数和已完成事项数

---

1. 安装依赖

npm install zustand

---

2. 创建 Zustand Store

// store/todoStore.ts
import { create } from 'zustand';// 定义 Todo 项的类型
interface Todo {id: number;text: string;completed: boolean;
}// 定义 Store 的类型
interface TodoStore {todos: Todo[];addTodo: (text: string) => void;toggleTodo: (id: number) => void;deleteTodo: (id: number) => void;
}// 创建 Zustand Store
const useTodoStore = create<TodoStore>((set) => ({// 初始状态：空数组todos: [<