Nevermind

告别 Redux Boilerplate？轻量级状态管理器 Zustand 详解

4 min

1. Redux 的“烦恼”

Redux 毫无疑问是 React 生态中最著名、最强大的状态管理库。它的单向数据流、时间旅行调试等特性使其成为大型、复杂应用的可靠选择。但对于许多中小型项目，Redux 的“样板代码” (Boilerplate) 却常常令人头疼：

  • Actions & Action Creators: 定义大量的 action 类型和创建函数。
  • Reducers: 编写庞大的 switch 语句来处理不同的 action。
  • Dispatch & Selectors: 在组件中通过 dispatch 派发 action，通过 useSelector 订阅状态变化。
  • Context Provider: 需要在应用的根部包裹一个 <Provider>。

这一切使得添加一个简单的状态也需要修改多个文件，流程繁琐。

2. Zustand：一股清流

Zustand (德语意为“状态”) 是由 Poimandres（react-three-fiber 的作者）团队开发的一个轻量级状态管理库。它的设计哲学就是 极简 和 非侵入式。

核心特点:

  • 代码量极少: 实现一个功能，Zustand 的代码量通常只有 Redux 的一小部分。
  • 基于 Hooks: 它的一切都围绕一个自定义 Hook 展开，符合现代 React 的开发习惯。
  • 无需 Context Provider: 你不需要在应用顶层包裹任何 Provider。Store 是独立于组件树的，可以在任何地方导入和使用。
  • 上手快: API 极其简单，几分钟就能学会核心用法。

3. 核心用法

Zustand 的使用分为两步：创建 Store 和 在组件中使用。

a. 创建 Store

你可以将 store 定义在任何一个 .js 或 .ts 文件中。

// src/store.js
import { create } from 'zustand';

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

export default useBearStore;

create 函数接收一个回调，该回调的参数是 set 函数（类似于 React 的 setState）。你在这里定义你的状态和更新状态的方法。

b. 在组件中使用

在任何组件中，像使用普通 Hook 一样使用它。

// src/components/BearCounter.jsx
import useBearStore from '../store';

function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} around here ...</h1>;
}

注意，我们通过一个选择器函数 (state) => state.bears 来订阅 bears 状态。这很重要，因为它能确保只有在 bears 状态变化时，该组件才会重新渲染，避免了不必要的性能开销。

// src/components/Controls.jsx
import useBearStore from '../store';

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation);
  return <button onClick={increasePopulation}>one up</button>;
}

获取 action 也同样简单。

4. 异步 Action

Zustand 处理异步操作也非常自然，你不需要任何像 redux-thunk 或 redux-saga 这样的中间件。

const useAsyncStore = create((set) => ({
  data: null,
  fetchData: async (url) => {
    const response = await fetch(url);
    const data = await response.json();
    set({ data });
  },
}));

结论

Zustand 并非要完全取代 Redux。Redux 在严格的规范、可追溯性和庞大的生态系统方面仍然具有优势。

然而，对于绝大多数 React 应用来说，Zustand 提供了一个更简单、更快速、心智负担更低的选择。如果你厌倦了 Redux 的繁文缛节，或者你的下一个项目需要一个轻快、灵活的状态管理器，那么 Zustand 绝对是一个值得你尝试的优秀方案。

React State Management Zustand Redux