我们使用 Valtio 替代 Redux。没有人后悔。

Source: Dev.to

概览

要更新计数器，Redux 需要你设置 store、reducers、actions、selectors，甚至可能需要 middleware。Valtio 只需要三行代码。

我们在一家 15 人的创业公司里把整个前端状态管理全部换成了 Valtio。那是大约一年半前的事。没有任何人要求回退。

以下是我们的经验。

仪式感问题

并不是 Redux 本身有什么根本缺陷。它运行良好，只是仪式感太重。

每新增一个功能，就要新增一个 slice、新的 action 类型，如果你喜欢的话，还要新增 selectors。我们的代码库里有些文件的 Redux 连接代码比业务逻辑还多。

对于想要快速迭代的小团队来说，这不是一种权衡，而是一种税负。

为什么选 Valtio

有人提到过 Zustand，我也看过 Jotai。它们看起来都很棒。但当我阅读 Valtio 文档时，简直不敢相信自己的眼睛。

你创建一个 proxy 对象。直接对该 proxy 对象进行变更，因为它本身就是你的状态。使用该状态的组件会自动重新渲染。

• 不需要 dispatch。
• 不再需要寻找 action creator。
• 不需要 connect 组件或使用 useSelector()。

迁移过程

正如预料的那样，最难的部分是迁移。我们的代码里到处都是 Redux——认证状态、UI 状态、表单状态、响应缓存。

我们并没有在一个周末把它们全部重写。我们继续使用 Redux 维护所有已有功能，直到必须触碰某个相关区域时，才把对应部分换成 Valtio。

整个迁移在三到四个月内完成。

没想到的收获

我没预料到的是，代码审查的速度明显提升了。

不知为何，Redux 的 PR 往往有一个模板，你只改了 5 行业务代码，却被四十行 diff 掩埋。使用 Valtio 时，你只会看到那 5 行改动。

新成员的提问也少了。使用 Redux 时，我要花一半的入职时间解释我们的状态架构。现在我只说 “对，这一切都存放在一个 proxy 对象里，直接改它就行”，他们几分钟就能懂。

数据对比

• Valtio：约 120 万次每周 npm 下载
• Redux：约 2700 万次每周 npm 下载
• Zustand：约 2800 万次每周 npm 下载

我们选择了房间里最不流行的选项。

Valtio、Zustand 和 Jotai 都是同一个人创建的。Daishi Kato 构建了三款最受欢迎的 React 状态管理库。每个库对同一问题采用了根本不同的思路：

• Valtio 使用 JavaScript Proxy 进行变更追踪
• Zustand 使用极简的基于 Hook 的 store
• Jotai 使用 atom

同一开发者，三种哲学。

我们最终选了 Valtio，因为它不需要你学习任何新东西。

权衡

Proxy 响应式在你把状态传递或序列化时可能会让你措手不及。

我们遇到过一个奇怪的边缘案例：SSR 对状态的快照与我们认为在快照前的状态不一致。修复它花了大约一个下午，而如果继续使用 Redux，可能要花很多个晚上去编写模板代码。

真实感受

Valtio 并不适用于所有团队。如果你在大型组织里，需要严格的模式约束，Redux 那种有意见的结构反而是一种特性。如果你需要时间旅行调试，Redux DevTools 是无可匹敌的。

但如果你是一个只想让状态管理不妨碍开发的小团队，Valtio 是我写过的、用于真实项目的、代码量最少的状态管理方案。

一个开发者为同一个问题实现了三种答案。我们选了最简单的。一年后，我仍会这么做。

你们团队使用哪款状态管理库？有没有考虑过切换？ 👇