状态管理是现代 Web 开发的一个重要方面，尤其是在复杂的应用程序中。它涉及处理可能随时间变化的数据，并确保该数据在整个应用程序中一致表示。有效的状态管理可以提高应用程序的可预测性和可维护性。
Zustand 是一个小型、快速且可扩展的 React 应用程序状态管理解决方案。 Zustand 由 Jared Palmer 和 Daishi Kato 创建，提供了一个简单直观的 API，与其他解决方案相比，使状态管理变得不那么麻烦。
在深入了解 Zustand 之前，让我们先了解一下 Web 应用程序中不同类型的状态：
Zustand 擅长管理本地和全局状态，并且可以与远程状态管理解决方案集成。
要开始使用 Zustand，首先通过 npm、yarn 或 pnpm 安装它：
npm install zustand # or yarn add zustand # or pnpm add zustand
Zustand 具有多项使其脱颖而出的功能：
让我们看一下 Zustand 的基本实现：
import { create } from 'zustand'
const useStore = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
function BearCounter() {
const bears = useStore((state) => state.bears)
return <h1>{bears} around here...</h1>
}
function Controls() {
const increasePopulation = useStore((state) => state.increasePopulation)
return <button onClick={increasePopulation}>one up</button>
}
在此示例中，我们创建一个具有熊状态的商店和两个修改它的操作。然后，BearCounter 和 Controls 组件可以使用 useStore 钩子访问和修改状态。
让我们将 Zustand 与其他流行的状态管理解决方案进行比较：
Zustand 的优点：
缺点：
Zustand 的优点：
缺点：
Zustand 的优点：
缺点：
Zustand 的系统设计基于几个关键原则：
This design allows Zustand to be both simple and powerful, providing excellent performance even in large applications.
Zustand makes it easy to persist state, which is crucial for many applications. Here's an example using the persist middleware:
import { create } from 'zustand'
import { persist } from 'zustand/middleware'
const useStore = create(persist(
(set, get) => ({
fishes: 0,
addAFish: () => set({ fishes: get().fishes + 1 }),
}),
{
name: 'food-storage', // unique name
getStorage: () => localStorage, // (optional) by default, 'localStorage' is used
}
))
This will automatically save the state to localStorage and rehydrate it when the app reloads.
One of Zustand's strengths is that it can be used outside of React components. This is particularly useful for integrating with other parts of your application or for testing:
const { getState, setState } = useStore
// Getting state
console.log(getState().bears)
// Setting state
setState({ bears: 10 })
// Using actions
getState().increasePopulation()
Let's look at some real-world examples of using Zustand:
import { create } from 'zustand'
const useAuthStore = create((set) => ({
user: null,
isAuthenticated: false,
login: (userData) => set({ user: userData, isAuthenticated: true }),
logout: () => set({ user: null, isAuthenticated: false }),
}))
// Usage in a component
function LoginButton() {
const { isAuthenticated, login, logout } = useAuthStore()
const handleAuth = () => {
if (isAuthenticated) {
logout()
} else {
// Simulate login
login({ id: 1, name: 'John Doe' })
}
}
return (
<button onClick={handleAuth}>
{isAuthenticated ? 'Logout' : 'Login'}
</button>
)
}
import { create } from 'zustand'
const useCartStore = create((set) => ({
items: [],
addItem: (item) => set((state) => ({ items: [...state.items, item] })),
removeItem: (itemId) => set((state) => ({
items: state.items.filter((item) => item.id !== itemId),
})),
clearCart: () => set({ items: [] }),
total: 0,
updateTotal: () => set((state) => ({
total: state.items.reduce((sum, item) => sum + item.price, 0),
})),
}))
// Usage in components
function CartSummary() {
const { items, total, removeItem } = useCartStore()
return (
<div>
{items.map((item) => (
<div key={item.id}>
{item.name} - ${item.price}
<button onClick={() => removeItem(item.id)}>Remove</button>
</div>
))}
<div>Total: ${total}</div>
</div>
)
}
import { create } from 'zustand'
import { persist } from 'zustand/middleware'
const useThemeStore = create(persist(
(set) => ({
theme: 'light',
toggleTheme: () => set((state) => ({
theme: state.theme === 'light' ? 'dark' : 'light',
})),
}),
{
name: 'theme-storage',
}
))
// Usage in a component
function ThemeToggle() {
const { theme, toggleTheme } = useThemeStore()
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
)
}
Zustand offers a refreshing approach to state management in React applications. Its simplicity, flexibility, and performance make it an excellent choice for both small and large projects. By reducing boilerplate and providing a straightforward API, Zustand allows developers to focus on building features rather than managing complex state logic.
While it may not have the extensive ecosystem of some older state management solutions, Zustand's design principles and ease of use make it a compelling option for modern React development. Its ability to work outside of React components and easy integration with persistence solutions further extend its utility.
For many React applications, Zustand strikes an excellent balance between simplicity and power, making it worth considering for your next project.
Zustand also handles asynchronous functions/code really well and without the need for any Middleware setup.
Let's talk a bit about that:
One of Zustand's strengths is its simplicity in handling asynchronous operations without the need for additional middleware or complex setups. This makes it particularly easy to work with API calls, data fetching, and other asynchronous tasks.
Zustand's approach to asynchronous code is straightforward:
Here's an example of how to implement asynchronous code in Zustand:
import { create } from 'zustand'
const useUserStore = create((set) => ({
user: null,
isLoading: false,
error: null,
fetchUser: async (userId) => {
set({ isLoading: true, error: null });
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) throw new Error('Failed to fetch user');
const userData = await response.json();
set({ user: userData, isLoading: false });
} catch (error) {
set({ error: error.message, isLoading: false });
}
},
}));
// Usage in a component
function UserProfile({ userId }) {
const { user, isLoading, error, fetchUser } = useUserStore();
React.useEffect(() => {
fetchUser(userId);
}, [userId]);
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
if (!user) return null;
return (
<div>
<h1>{user.name}</h1>
<p>Email: {user.email}</p>
</div>
);
}
In this example:
Unlike Redux, which often requires middleware like Redux Thunk or Redux Saga for handling async operations, Zustand's approach is much more straightforward. This simplicity can lead to less boilerplate and a gentler learning curve, especially for developers new to state management.
MobX and Recoil also offer ways to handle async operations, but Zustand's approach might be considered more intuitive due to its direct use of async/await syntax without additional abstractions.
Zustand 对异步代码的处理体现了其简单性和灵活性的理念。通过允许开发人员直接在存储中编写异步函数，无需特殊语法或中间件，Zustand 可以轻松管理复杂的状态操作，同时保持代码库干净和可读。
这种异步代码方法，与 Zustand 的其他功能（如小包大小和易于设置）相结合，使其成为各种规模的项目的绝佳选择，特别是那些涉及重要异步状态管理的项目。
希望这个“有点指南”对任何正在思考如何管理全局应用程序状态的人来说都是有用且富有洞察力的。
谢谢您，祝您编码愉快。
查看我的网站 https://www.ricardogesteves.com
跟着我@ricardogesteves
X（推特）
全栈开发人员 |热衷于创造直观且有影响力的用户体验 |总部位于葡萄牙里斯本？ - 里卡多·GE史蒂夫斯
github.com
以上是Zustand，何时、如何以及为何的详细内容。更多信息请关注PHP中文网其他相关文章！
