Zustand 是一个简单且轻量级的状态管理库,适用于 React 应用程序。它基于 React 的 Context API 和 Hooks,提供了一种简单的方式来管理共享状态。下面是使用 Zustand 的基本用法:
首先,确保已安装 zustand 依赖项:
npm install zustand
然后,我们可以创建一个 store 来管理状态。在这个例子中,我们创建一个计数器的状态:
// store.js
import create from 'zustand';
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
}));
export default useStore;
在这个例子中,我们使用 create
函数创建一个 store,并传递一个回调函数。回调函数接收一个 set
参数,它是一个用于更新状态的函数。我们在回调函数中定义了一个 count
状态变量和两个更新状态的函数 increment
和 decrement
。
接下来,在组件中使用这个 store:
// Counter.js
import React from 'react';
import useStore from './store';
const Counter = () => {
const count = useStore((state) => state.count);
const increment = useStore((state) => state.increment);
const decrement = useStore((state) => state.decrement);
return (
<div>
<h2>Counter</h2>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
export default Counter;
在这个例子中,我们使用 useStore
钩子函数来访问和更新状态。我们通过传递一个回调函数给 useStore
,回调函数接收当前状态并返回我们想要的特定状态或更新函数。
最后,在根组件中使用 Counter
组件:
// App.js
import React from 'react';
import Counter from './Counter';
const App = () => {
return (
<div>
<h1>Zustand Example</h1>
<Counter />
</div>
);
};
export default App;
在这个例子中,我们将 Counter
组件放在根组件 App
中。
当使用 Zustand 进行状态管理时,可以应用一些高级用法来更好地组织和处理状态。下面是一些高级案例的讲解:
Zustand 允许我们从已有的状态派生出新的状态。我们可以使用 useMemo
或 reducer
函数来实现派生状态的计算。
// store.js
import create from 'zustand';
const useStore = create((set) => ({
todos: [],
addTodo: (todo) => set((state) => ({ todos: [...state.todos, todo] })),
completeTodo: (id) =>
set((state) => ({
todos: state.todos.map((todo) =>
todo.id === id ? { ...todo, completed: true } : todo
),
})),
completedTodos: () =>
set((state) => ({
completedTodos: state.todos.filter((todo) => todo.completed),
})),
}));
export default useStore;
在这个例子中,我们在 useStore
的回调函数中定义了 addTodo
和 completeTodo
两个操作。然后,我们使用 completedTodos
函数来派生一个状态,该状态是根据 todos
数组中的已完成任务计算得出的。
Zustand 支持异步操作,可以使用 async
和 await
来处理异步逻辑。
// store.js
import create from 'zustand';
const useStore = create((set) => ({
loading: false,
todos: [],
fetchTodos: async () => {
set({ loading: true });
const response = await fetch('https://api.example.com/todos');
const todos = await response.json();
set({ todos, loading: false });
},
}));
export default useStore;
在这个例子中,我们定义了一个 fetchTodos
函数,它是一个异步函数。在函数内部,我们首先设置 loading
状态为 true
,然后发起一个异步请求来获取待办事项数据。一旦数据返回,我们将其设置到 todos
状态中,并将 loading
状态设置为 false
。
Zustand 还支持使用中间件来处理状态的更新,例如日志记录、持久化等。可以使用 zustand/middleware
模块来创建中间件。
// store.js
import create from 'zustand';
import { devtools } from 'zustand/middleware';
const useStore = create(
devtools((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
}))
);
export default useStore;
在这个例子中,我们使用了 devtools
中间件来添加开发者工具支持。它将在浏览器的 Redux DevTools 扩展中显示状态和操作。