简化您的店铺！Zustand 简介

AWS AI 直播！

在 React 社区，状态管理一直存在着鲜明的共识。Redux 在最初发布时，对 React 生态系统来说是一项革命性的技术。它允许应用程序拥有一个不可变的全局 store，并优雅地解决了诸如prop 传递等难题。时至今日，它依然强大且可扩展。

我使用 Redux 和类似的解决方案已经很多年了，一直困扰我的是上手所需的大量样板代码。Redux Toolkit在很大程度上解决了样板代码的问题，但与MobX、MST等优秀的解决方案相比，对于中小型项目来说，它仍然显得过于冗长。

几周前，我想重构一个规模不小、写入操作繁重的上下文状态，寻找更好的解决方案，Redux 和 MobX 自然而然地浮现在我的脑海中。然而，我想要的是更简洁、更优雅的方案。

Zustand来救场了！！

正如文档中所述，“Zustand 是一个小型、快速且可扩展的精简状态管理解决方案。它拥有基于钩子的便捷 API，既不冗赘也不固执己见，但又足够清晰明确，并具有 Flux 特性。”

真正促使我使用 Zustand 的原因是它上手非常简单，而且功能强大，例如针对频繁状态变化的瞬态更新、记忆选择器、与Immer的集成！最棒的是它不需要Provider！

让我们通过一个使用 Typescript 的 Zustand 基本商店示例来讲解一下。

安装 zustand

yarn add zustand

创建商店

import create, { SetState, GetState } from 'zustand';

type CountStore {
  count: number;
  increment: () => void;
};

const useCountStore = create<CountStore>((set: SetState<CountStore>, get: GetState<CountStore>) => ({
  count: 0,
  increment: (): void =>  {
    const { count } = get();
    set({ count: count + 1 });
  }
});

create它接受两个参数set。get这个set函数（你猜对了！）会合并状态，类似于setState基于类的 React 组件中的做法。通过这个get函数，我们可以访问 store 的当前状态，这在我们需要在 action 中访问状态时尤其有用。非常实用！

与组件一起使用

现在，让我们看看如何使用 hooks 在组件中使用我们的商店！

function Counter(): React.ReactElement {
  const count = useCountStore(state => state.count);
  const increment = useCountStore(state => state.increment);

  return (
    <div>
      <h1>count: {count}</h1>
      <button onClick={increment}>+1</button>
    </div>
  );
}

商店本身就充当了选择钩！真棒。我们还可以对同一个商品进行多次选择。

const [count, increment] = useCountStore(state => [state.counter, state.increment]);

就这样，我们现在就有了一个简单的商店，没有任何额外的样板代码。

我们甚至还没真正体验过 zustand 的强大功能。它拥有众多令人惊叹的特性，例如瞬态更新、沉浸式集成、记忆化选择器、异步操作、中间件……等等。我觉得文档里对这些特性的解释更详细。

希望这篇文章能对 Zustand 起到简要介绍的作用。目前为止，我非常喜欢使用它。

你已经在使用 Zustand 了吗？或者想和我聊聊 JavaScript 的方方面面？欢迎在 Twitter 上关注我@karan_6864