理解 Zustand

状态管理往往让人觉得过于复杂。

你知道如何使用 React 的 useState。你知道如何传递 props。你知道如何提升状态 (lift state up)。

但随着应用的增长，一切都会变得混乱。你开始将数据传递给那些并不需要它的组件。这就是 prop drilling（属性钻取）。它会让你的代码变得杂乱且难以维护。

Zustand 解决了这个问题。它为你的应用提供了一个位于 React 组件之外的共享状态。

可以这样理解：

没有 Zustand 时： 组件 A 将 props 传递给 B，B 传递给 C，C 再传递给 D。

使用 Zustand 时： 每个组件都直接与中央 store 进行通信。没有中间人。没有 prop drilling。

一个 Zustand store 由两部分组成：

• State（状态）：你的数据。
• Actions（动作）：修改数据的函数。

就这么简单。

Zustand 运行很快，因为它只重新渲染那些使用了发生变化的数据的组件。

如果你需要数据在页面刷新后依然存在，请使用 localStorage。由于 localStorage 只能存储字符串，因此你必须使用 JSON.stringify 来保存对象，并使用 JSON.parse 来读取它们。

以下是构建一个 auth store 的简单方法：

• 将用户和 token 存储在 localStorage 中。
• 使用 login 函数来更新 store 和浏览器存储。
• 使用 logout 函数同时清除两者。

它与 Redux 相比如何？

Redux 需要 dispatcher 和 reducer。它涉及大量的样板代码 (boilerplate code)。Zustand 允许你直接调用函数。它的心智负担更小，配置也更少。

需要避免的常见错误：

• 在 create 函数中忘记返回一个对象。请在你的对象周围使用括号。
• 在 state 对象内部使用分号。请改用逗号。
• 对已经是字符串的数据进行解析。

状态管理库的核心不在于管理状态，而在于管理复杂度。

不要试图去背诵每一个 API。开始去观察这个工具试图解决的问题。当你理解了问题，工具的使用也就变得合理了。

来源：https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11