精读《react-rxjs》

[ascoders]

react-rxjs

没错，前端精读还可以精读代码仓库，这很 geek！

这次就看看 react 与 rxjs 结合到底做了哪些尝试，顺便对比一下 cyclejs。

[crimx]

感谢分享！贴一下阅读理解，望指正。

先看 react + redux 和 cyclejs，我的理解是，随时间变化：

• 在 react + redux 中，redux 对整个 state 进行截片，交由 react 去 map vdom ，然后 ReactDOM 去 map UI
• 而 cyclejs 借助 stream 天然纯净的性质，在每个组件中直接 map vdom 进行截片，交由 driver 去 map UI

cycle-react 相当于在 cyclejs 上包了一层 react driver， map vdom 换成 map react component

react-rxjs 我感觉就是换了 rxjs 处理 action 的 redux

• redux 中 action 通过字符串匹配 map reducer ，通过 dispatch 通知
• react-rxjs 中 action 就是一条条 stream，最后 map reducer ，dispatch 方法要自己封装

[ascoders]

说得很好！再看看 redux-observable，这个 rxjs + redux 结合的思路。

redux-observable 只有一个数据源，在 dispatch 的过程通过 .next() 触发一次数据源，action 之间可以相互调用是亮点。

reducer 订阅了这个数据源，内部通过 type 字段 filter 出的那条消息处理，最后通过 Connect map 到 react component。

和 react-rxjs 相比，redux-observable 更符合 redux 思想，而 react-rxjs 多数据源更像 flux 思路。

[crimx]

对没错，谢谢指出，这么分明白了。redux-observable 其实也可以直接用 observable 取代 redux ，但循环利用 redux 的生态确实更加便捷。

[ascoders]

借鉴知乎 @slashhuang 的回答，redux-observable 不仅利用了 redux，而且可能导致数据层循环依赖导致栈溢出，这方面设计有一些欠缺。