193 - 《关于数据流的一些思考》

这几天把 valtio 内置到 umi 了，以插件的形式（Bigfish 中无需插件）。随后就开始写大量示例，自己先踩踩坑，写了远程数据的 Todo List、HackerNews Clone、有本地存储和文件系统的 Markdown 预览工具。感觉又回到了 Redux 和 Dva 的时代，但是以更现代的方式，写起来感觉很爽，因为数据和视图分离和我的心智非常契合。代码在 https://github.com/umijs/example-with-valtio 。

优点

先说下优点。

1、数据与视图分离的心智模型。不再需要在 React 组件或 hooks 里用 useState 和 useReducer 定义数据，或者在 useEffect 里发送初始化请求，或者考虑用 context 还是 props 传递数据。如果熟悉 dva，你会在此方案中找到一丝熟悉的感觉，概念上就是 reducer 和 effects 换成了 actions，subscriptions 则换了种形式存在。

const store = proxyWithSubScriptions({
  count: 1,
  actions: { add() { store.count += 1; } }
}, {
  subscriptions: {
    setup({ history }) { return history.listen(...); },
  },
});

如果你想要 dva 的语法糖，还可以再包一层变这样，有没有很熟悉？

const store = createStore({
  state: { count: 1 },
  actions: { add() { store.count += 1; } },
  subscriptions: {
    setup({ history }) { return history.listen(...); },
  },
});

2、更现代的 dva？「现代」主要出于这些点，1）基于 proxy，mutable，所以更新更简单，同时读取更高效，无需 selector，tracking with usage，2）没有中心化的 actions，以及基于组合式的扩展机制，这些都是对 TypeScript 更友好的方式，3）更少脚手架代码。

缺点

再看缺点。

1、兼容性。由于基于 proxy，所以不支持 IE 11、Chrome 48、Safari 9.1、Firefox 17