Pullstate - 简单易用的基于 hooks 的 React 状态管理框架

状态管理是应用程序最重要的组成部分之一，而 React 生态系统中有很多选择。

特别是，使用Capacitor和Ionic React构建 iOS 和 Android 移动应用的开发者经常向我们咨询状态管理方面的建议。当然，Redux 是一个不错的选择，我仍然是它的忠实拥趸，但还有像 MobX 这样更简单的状态管理方案，以及使用 Context API 自行实现状态管理的方法。

我花了很多时间使用 Redux，也尝试过使用 Context API 的定制化方案。然而，我仍然不满意。我想要找到一种简单但高性能的方案，并且能够原生集成 Hooks 和函数组件，我现在只在 React 中使用它们（抱歉，我class再也不想写这个词了😆）。

就在那时，我偶然发现了Pullstate。Pullstate是一个规模较小、相对不为人知的库（撰写本文时只有 300 个 star），但我相信它随着时间的推移会变得更加流行。

探索拉力状态

Pullstate 提供了一个简单的全局注册的 Store 对象，并为组件访问该 store 中的数据提供了钩子：

store.ts：

interface StoreType {
  user: User | null;
  currentProject: Project | null;
}

const MyStore = new Store<StoreType>({
 user: null,
 currentProject: null
});

export default MyStore;

然后，在你的组件中，只需使用useStatestore 提供的方法从 store 中选择数据即可：

const UserProfile: React.FC = () => {
  const user = MyStore.useState(s => s.user);
}

修改状态

要更新 store 中的状态，请使用以下update方法：

const setUser = (user: User) => {
  MyStore.update((s, o) => {
    s.user = user;
  });
}

该update函数的工作原理是修改状态草稿。然后处理该草稿以生成新的状态。

通常情况下，状态变更会引发警报，但 Pullstate 的神奇之处在于一个名为Immer 的非常有趣的项目。Immer 本质上是代理一个对象，然后将该对象上的变化转换为一个新对象（就我有限的经验而言）。这有点像 vdom 通过 diff 来构建新的 DOM 树。

这非常强大且简单，但也存在一些陷阱。首先，对s上述值中的对象进行引用比较会失败，因为它们实际上是Proxy对象。这意味着像这样的操作是行不通的：

MyStore.update(s => {
  s.project = s.projects.find(p => p === newProject)
});

请改用o上面提到的第二个参数，其中包含未经代理的原始状态。另一个需要注意的地方是，确保函数不要返回任何值update。

下一步

使用 Pullstate 之后，我很难不向所有Ionic React开发人员以及将Capacitor与其他 React UI 库一起使用的开发人员推荐它。

我认为 Pullstate 在小型项目上简单易用，同时又能轻松扩展到更复杂的项目，两者之间取得了很好的平衡。对于大型项目，它可以并行创建多个 store，实现类似 Redux reducer 的组织结构。

Pullstate 还提供了异步操作的一些便捷辅助函数，以减少异步状态样板代码（例如处理成功和失败状态），尽管我还没有广泛使用这些函数。

接下来，我要探索如何将它与reselect之类的工具结合使用，以构建可重用的、记忆化的选择器。

你觉得怎么样？你用过Pullstate吗？请在评论区分享一下！