camel (Cam)

还在纠结 Flux 或 Relay，或许 Redux 更适合你

camel — Sun, 16 Aug 2015 12:40:49 +0800

重磅消息，Redux 1.0 发布，中文文档同步上线，终于可以放心用于生产环境了！

在这个端应用技术膨胀的时代，每天都有一大堆框架冒出，号称解决了 XYZ 等一系列牛 X 的问题，然后过一段时间就不被提起了。但开发的应用还是需要维护的！所以选择框架时不要只顾着自己用着爽，还要想着以后别人接手时的难易度。

因为 Flux 本身约定不够细致，如何做异步、如何做同构这些非常普遍的问题，官方都没有给出详细的说明。还有 store，view 里一大堆重复代码，极速膨胀的 action 等问题。这也难免会冒出一堆“改良”性的轮子。有一些非常闪光，如 Redux，Reflux，Marty。Reflux 和 Marty 基本上只是去掉重复代码并为现有 Store，Action 增加一些灵活性，用起来比原生 Flux 上手更容易，但是总体二者没有跳出 Flux 的思想，大量依旧采用“传统”的 mixin 方式实现。如果项目不是很复杂可以试试。至于 Relay，由于需要后端 GraphQL 支持，对于采用 REST 接口开发的遗留项目和前后端分离的大团队来说成本切换有点高。

现在开始说今天的主角 Redux。Redux 由 Flux 演变而来，后来受 Elm 启发，去掉了 Flux 的复杂性，到现在越来越自成一派，甚至已经有了 Angular 的实现。最近开始把团队旧的纯 Flux 开发项目逐步往 Redux 上迁移。Redux 还是秉承了 Flux 单向数据流、Store is the single source of truth 的思想，这两点略过。下面谈一下使用 Redux 过程中的其它感受。

特性和优点

文档清晰，编码统一

Redux 文档非常清晰细致，这一点有助于统一团队编码风格，节省了很多纠结和踩坑的时间。再也不纠结 Ajax 请求到底放哪里了，全部丢到 action(通用的也可以放到 middleware) 里就没错。究竟使用 state 还是 props？组件里全部使用 props，只在顶层组件里使用 state。之前为了灵活或兼容性，Redux 的 provider 提供 Provider decorator 装饰器和 provider 两种调用用法，现在只建议使用 Provider decorator。Redux 这点设计思想和 Python 的非常像：

There should be one, and preferably only one - obvious way to do it.

你会发现用了 Redux 后，整个团队写的代码风格都比较一致，上一次有这种感受是项目由旧的 jQuery 组件迁到 React 的时候。如果有些场景你还是纠结怎么办？去 Redux issues 提个 issue 吧，很快就会有人回复。

State, State, State -> Store

前端复杂性在于 view，view 复杂性在于 state 处理。state 复杂是因为包括了 AJAX 返回的数据、当前显示的是哪个 tab 等这些 UI state、表单状态、甚至还有当前的 url 等。Redux 把这些所有的 state 汇总成一个大的对象，起了个名字叫 Store，没错，就是 Flux 里的 Store。只是 Redux 限定一个应用只能有一个 Store。单一 Store 带来的好处是，所有数据结果集中化，操作时的便利，只要把它传给最外层组件，那么内层组件就不需要维持 state，全部经父级由 props 往下传即可。子组件变得异常简单。

Reducer

只有一个 Store，第一感觉是这个 Store 对象会不会非常大？其实对象大并不可怕，可怕的是对象处理逻辑放到一起。只要把这些处理逻辑按处理内容拆分不就可以了吗？！拆分后的每块处理逻辑就是一个 Reducer。把这些 Reducer 里的每块内容合到一起（用 ES6 的 import 语法）就组成了完整的 Store。Reducer 只是一个纯函数，所以很容易测试。提到 Reducer 不得不提函数式编程，reducer 本质就是做对象格式转换，这点用函数式操作实在太高效了。

(previousState, action) => newState

因为是纯函数，组合多个 reducer 非常简单，参见 https://gist.github.com/gaearon/d77ca812015c0356654f。顺便也移除了 Flux 里最让人诟病的 waitFor 语法。

Action

Redux 的 action 与 Flux 中的类似，都是表达 view 要改变 store 内容的载体。Flux 是通过统一的 Dispatcher 分发 action，Redux 去除了这个 Dispatcher，使用 store 的 store.dispatch() 方法来把 action 传给 store。由于所有的 action 处理都会经过这个 store.dispatch() 方法，Redux 聪明地利用这一点，实现了与 Koa，Ruby Rack 类似的 Middleware 机制。Middleware 可以让你在 dispatch action 后，到达 store 前这一段拦截并插入代码，可以任意操作 action 和 store。很容易实现灵活的日志打印、错误收集、API 请求、路由等操作。我们团队根据预建立的 action 和请求间的映射直接在这里直接发 Ajax 请求，从此麻麻再也不用担心我异步取数据了。

除了这些之外，还有逆天的 DevTools，可以让应用像录像机一样反复录制和重放。

对于同构应用 Redux 也有很好的支持，这一块团队正在调研，等实际上线后再做分享。

不足或不便

当然使用过程中也有一些不顺利的地方，其实主要还是思想方面的转变。

组件应尽可能无状态化

这也被称为 Smart Component 和 Dumb Component 之间的选择，组件库开发应尽可能做成 Dumb Component。这一点和传统的 jQuery 类普遍使用命令式语法做组件开发有很大不同。如写一个 Dialog，jQuery 组件一般会提供 dialog.show(), dialog.hide() 方法。但 Redux 要求显示或隐藏应该被当作一个 props，由外部传入来控制。Redux 比 Flux 更严格要求 Store 作为数据来源的惟一性，所以之前能用的组件现在发现直接不能用了。

轮训和 WebSocket 请求的处理

请求的发起要在 action 里做，但是请求的暂停/启动状态要放到 store 里，会增加一些复杂性，但保证了数据的一致性。其实还是未明确 store 是单一数据源的思想。

资料：

官方地址：https://github.com/rackt/redux 中文文档：http://github.com/camsong/redux-in-chinese 项目列表：https://github.com/xgrommx/awesome-redux 同构示例：http://react-redux.herokuapp.com/ Rails 示例：https://github.com/alexfedoseev/generator-flux-on-rails

对了，听说中文文档翻译的还不错，连 Redux 作者 Dan Abramov 都推了，要不你也看看 :D

原文地址：https://github.com/camsong/blog/issues/1

近期会整理更多 React，Redux 相关开发实践，请关注我的博客

GitHub 上下载单文件 - GitHub Mate for Chrome

camel — Wed, 18 Dec 2013 10:54:02 +0800

很多时候，git clone 没有必要，下载一个单文件足矣，我一般是这样：

找到要下载的文件
点击在 GitHub 上打开
找到右上角的“Raw”按钮
右击“另存为...”，也可以 Option/Alt + Click

点来点去太麻烦，于是写了个 Chrome extension: GitHub Mate，准备带添加几个常用特性，如果有建议，欢迎交流。源码在此：https://github.com/camsong/chrome-github-mate

Ruby Simple HTTP Server With Rack

camel — Thu, 13 Dec 2012 23:21:40 +0800

把当前目录作为 web server 的根目录，用于解决 Chrome 本地 AJAX 请求Origin null is not allowed by Access-Control-Allow-Origin. 问题。类似 Python 的 SimpleHTTPServer。

2 步搞定：

1. 安装 rack，并新建 rack 配置文件 config.ru(只需运行一次)

gem install rack
echo "run Rack::Directory.new('')" > ~/config.ru

2. 切换到任意目录运行

rackup ~/config.ru

如果觉得命令长就建立 alias alias rp='rackup ~/config.ru'

访问即可：http://locahost:9292/

gem 推荐：better_errors

camel — Mon, 10 Dec 2012 20:11:50 +0800

今天 github 趋势页上升排名第一，为你的 Rails 项目带来更好的 error page. https://github.com/charliesome/better_errors

[上海][2012年11月27日] Ruby Tuesday 活动召集 (志愿者答谢)

camel — Sat, 24 Nov 2012 00:22:15 +0800

非常感谢所有志愿者为本次大会做出的贡献。

还记得上周五晚上我们欢迎晚宴一起 happy，然后整理资料到凌晨吗？还记得一大早赶第一班车到会场准备，然后所有参会者走完后整理现场的场景吗？还好会场有吃不完的零食，聊不完的话题陪着我们:) 大会渐远，让我们再次聚到一起，回顾一下 RubyConfChina 的故事。

福利：这次所有志愿者的费用由 Daniel 埋单，让我们再次 High 起来。。。据 Daniel 说，以后社区其它福利也会优先想到志愿者，大家一起期待吧。

诚邀 @kenshin54, @navyboys, @xmonkeycn, @steven_shen, @charleschu, @jay_shao, @brandon_zhu, @lxneng, @zlx_star, @franky_xhl, @richard020389, @sailtsao, @lc_tgb, @mickey, @elff1, @betterthornbird, @jonny, @matineee, @miclle, @zw963 外地已归的志愿者可能无法赶到，也表示由衷的感谢。

报名：不需要，感兴趣的话，直接过来就可以，欢迎大家积极参加。 费用：活动不收费，在咖啡店如果需要请自行点单。志愿者免单。 时间：2012 年 11 月 27 日（周二）晚上 6:30 至 9 点 地点：COSTA COFFEE(国金中心店)，浦东新区世纪大道 8 号上海国金中心 D 座 B1 楼 LG1-37 室。 交通：地铁二号线陆家嘴站，位置在浦东陆家嘴的 Apple Store 旁边 网址：http://www.dianping.com/shop/4600640

非志愿者也欢迎到场

[上海][2012年11月13日] Ruby Tuesday 活动召集 (RubyConfChina 志愿者召集)

camel — Thu, 08 Nov 2012 16:55:32 +0800

由于@lgn21st同学筹备大会非常辛苦，这次活动由我发起。本次活动暂无主题分享，大家自由讨论，热衷欢迎社区里的同学来做主题分享！

亲爱的志愿者们，还记得我们的约定吗？本次 RubyConfChina 大会报名火爆超出预期，给我们任务增加了难度。所以召集大家提前碰个面，希望能到的尽量到，谢谢。 @zw963，@lxneng，@kenshin54，@zlx_star，@nevill，@navyboys，@xmonkeycn，@franky_xhl，@richard020389，@sailtsao，@lc_tgb，@mickey，@elff1，@betterthornbird，@jonny，@steven_shen， @charleschu，@jay_shao，@brandon_zhu

报名：不需要，感兴趣的话，直接过来就可以，欢迎大家积极参加。费用：活动不收费，在咖啡店如果需要请自行点单。时间：2012 年 11 月 13 日（周二）晚上 6:30 至 9 点 ~~地点：浦东新区陆家嘴西路 168 号正大广场 3 楼星巴克 (近东方明珠)~~ 地点：浦东新区世纪大道 8 号上海国金中心 D 座 B1 楼 LG1-37 室，COSTA COFFEE(国金中心店) 交通：地铁二号线陆家嘴站，位置在浦东陆家嘴的 Apple Store 旁边

~~网址：http://www.dianping.com/shop/1901974~~

由于星巴克店装修，地点改为附近的，COSTA。请大家相互转告。 http://j.map.baidu.com/G7Lzg

Bitbucket 这次改版后感觉比 Github 好看多了

camel — Wed, 10 Oct 2012 01:33:56 +0800

github 最近几次 UI 大变动差点把我凌乱了，但bitbucket越来越好看，你觉得呢？

学习快捷键的网站

camel — Fri, 20 Jul 2012 14:26:32 +0800

https://www.shortcutfoo.com/

帮忙记忆快捷键，还可以自己定制，支持：Vim, Sublime, Emacs...

Gem 命名的 bug

camel — Wed, 18 Jul 2012 15:52:29 +0800

如果项目依赖一个叫"god-like"的 gem，那么 Rails 运行时就会自动生成一个GodLike的 module。

但如果你依赖一个叫'journey'的 gem，同时又有一个 model 叫‘Journey'，那就悲剧了。因为当在程序中调用’Journey'时，得到的是 gem 生成的Journey:module，却得不到 model，所有 ActiveRecord 相关的操作都会失败。

不知大家有没有处理这个问题的好方法？

ps：昨晚 @simsicon 的分享很精彩，这个问题应该是和$LOAD_PATH 相关的。

[阿里技术嘉年华] 快来报名吧

camel — Sat, 23 Jun 2012 15:54:42 +0800

http://adc.taobao.com/carnival/schedule

时间：7.7-7.8 地点：杭州海外海国际会展中心

非广告贴，周末无聊，想去看看，寻基友同前往。

MacBook Air 效率真的那么高吗？

camel — Mon, 14 May 2012 14:07:17 +0800

来自 Tim 的文章，

MacBook Air 与工作效率

http://timyang.net/misc/macbook-air-productive/

有点疑问， Air 不用关机。固态硬盘真的那么爽吗？ Air 外接大显示器和键鼠，可当主机用。Air 的集成显卡撑得住吗？

Linus Torvalds 都转战 Air 了，隐隐想把自己的 Pro 给换了。受够了 Pro 的重量和发热的有木有，有木有

短域名是如何实现的

camel — Sun, 13 May 2012 19:47:03 +0800

类似

http://bit.ly/rEex7g

这样的短域名要保证惟一是如何实现的，第一感觉是使用 UUID，可是那样太长了，有没有比较好用的算法或思路，谢谢。

加了广告？

camel — Sun, 22 Apr 2012 21:02:09 +0800

刚才打开时右下角弹出了梦*莎的广告，要点叉才能去掉。

请问是社区有调整吗？还是恶心的宽带运营商捣鬼，法克

Github 小更新

camel — Thu, 19 Apr 2012 21:38:53 +0800

今天用 github 时发现右上角有个奇怪按钮，点开一看，原来可以直接新建仓库。很方便啊，只是图标不太容易看明白

[求助] Nokogiri 抓取百度快照乱码处理

camel — Mon, 09 Apr 2012 16:02:03 +0800

起因在这里：http://ruby-china.org/topics/2459

我写了一个脚本把我网站 (rubyer.me) 相关所有百度快照抓取过来了。这样做的优点就是 SEO 友好，而且有些朋友链接了我的博客，这样做不会导致链接丢失。这个脚本实现的功能：

抓取网站相关的百度快照，并根据快照的路径生成相应文件。

现在只有一个问题：

The Fu*king encoding

我试了 GB2312，GBK，UTF-8 之间的各种转换结合。恶心的是总有半的能正常编码，另一部分乱码。奇迹般的出现

# #Encoding:ASCII-8BIT怎么会有这个编码？

代码写的急，有点乱，但能正常运行，希望大大们有兴趣可以试一下，复制粘贴即可。

源码由于太长，贴出来影响排版，就麻烦去 github 看吧： https://github.com/camelsong/cache_spider/blob/master/baidu_cache_spider.rb

听说 C 处理 UTF-8 有一些 hacks，哪位了解吗？ruby 相应的是不是也需要呢？

悲催，数据库被删，博客被格式化

camel — Sun, 08 Apr 2012 14:33:14 +0800

如果不能说脏话，我无话可说。

我和几个朋友合租的Linode，并在上面放了我的博客 (Ruby 迷 http://rubyer.me )，由于懒得折腾，一直用Wordpress + Mysql。

由于服务器偶尔会出现 IO 问题，忽然有一哥们说“我们重装系统吧”，我当时工作比较忙，就回复他让他先检查下原因，重装是最差最后的选择。

可是。。。

昨天，他无声无息，直接格盘重装了。直到后来我问他时他才说“重装”了。啊啊啊。。。

他不明白 博客和人的感情，不明白啥叫心血。

这事我也有责任，备份应该是日常工作，但由于工作忙，我一直懒得备份，有几个备份集都放在服务器上，一直懒得拉下来储存。

~~我非常无语~~

2012 年 4 月 11 日更新

谢谢大家精神和技术支持！尤其感谢@hooopo，不然乱码问题还在折腾。这事事故教训了我两个字：备份，再次让人相信：技术现在所有帖子和评论均已恢复，并托管在 github pages 上。惟一不足是全为静态页面，无法评论。我计划新开发一个简洁的博客系统。托管在 heroku 或 engine yard 或 ec2 上。整个恢复过程如下：

1. 使用脚本获取所有百度快照页面。（只有静态 html，没有图片）https://github.com/camsong/cache_spider （这个脚本原则上可以抓取任何网站的所有快照） 2. 图片等资源有备份（万幸），直接恢复。 3. 整理所有文件上传到 github pages: https://github.com/camsong/camsong.github.com

Mac 下的 Railser 要有褔了

camel — Thu, 05 Apr 2012 23:44:10 +0800

上周 Yehuda Katz 发起募集 $40k 来开发 'rails.app'，目的就是能在 OS X 上一键安装 Ruby, Rails, RVM 等杂七杂八的东西，不要让开发者发太多时间折腾环境问题。看后感觉和 windows 下的 rails installer (http://railsinstaller.org/) 很像。

当初目标是募集 $25k，没想到现在都$ 43k 了。

希望大家有钱出钱，有力出力，没力帮顶。XD

详情在这里：http://www.kickstarter.com/projects/1397300529/railsapp