react with zustand
Create store
import create from 'zustand';
interface Todo {
id: number;
text: string;
done: boolean;
}
interface TodoStore {
todos: Todo[];
addTodo: (text: string) => void;
toggleTodo: (id: number) => void;
}
/**
* set 函数是 Zustand 提供的用于更新状态的方法
* 有点类似React中的setState(state => state + 1)
* 它接受一个回调函数,这个回调函数返回一个描述状态变化的对象。使用这个函数,你可以实现状态的更新和管理。
*/
export const useTodoStore = create<TodoStore>((set) => ({
todos: [],
addTodo: (text) => set((state) => ({todos: [...state.todos, {id: Date.now(), text, done: false}]})),
toggleTodo: (id) => set((state) => ({
todos: state.todos.map(todo => todo.id === id ? {
...todo,
done: !todo.done
} : todo)
})),
}));
Use the store
import { useTodoStore } from './store';
function TodoApp() {
const todos = useTodoStore(state => state.todos);
const addTodo = useTodoStore(state => state.addTodo);
const toggleTodo = useTodoStore(state => state.toggleTodo);
const handleAddTodo = () => {
const text = prompt('Enter a new todo:');
if (text) {
addTodo(text);
}
};
return (
<div>
<button onClick={handleAddTodo}>Add Todo</button>
<ul>
{todos.map(todo => (
<li key={todo.id} onClick={() => toggleTodo(todo.id)} style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
{todo.text}
</li>
))}
</ul>
</div>
);
}
export default TodoApp;