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

重磅消息,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 语法)就组成了完整的StoreReducer 只是一个纯函数,所以很容易测试。提到 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/

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

时间: 2024-11-08 23:43:56

还在纠结 Flux 或 Relay,或许 Redux 更适合你的相关文章

Python中str()与repr()函数的区别——repr() 的输出追求明确性,除了对象内容,还需要展示出对象的数据类型信息,适合开发和调试阶段使用

Python中str()与repr()函数的区别 from:https://www.jianshu.com/p/2a41315ca47e 在 Python 中要将某一类型的变量或者常量转换为字符串对象通常有两种方法,即 str()或者 repr() . >>> a = 10 >>> type(str(a)) <class 'str'> >>> type(repr(a)) <class 'str'> 但是这二者之间有什么区别呢?因

还在纠结基金怎么买?Python手把手教你爬取2000多支优选基金!

人不理财,财不理你,码农每个月辛辛苦苦的加班熬夜,为了就是那一点加班费,没办法谁叫现在的房价高的离谱呢,手里捧着窝窝头,菜里没有一滴油!有一天在咖啡店遇到了一个叫彼得高手,聊了一些理财的观念,听完之后茅塞顿开,投资有道!比如70%来定存,30%的钱来买一些基金定投,长期坚持下去,收益会不错! 码农听完,两眼冒光,爬虫数据分析,这些对我是小菜一碟啊,说干就干!立马熬夜写了一个爬虫,把7000多支基金爬个遍.下面我们就爬取一批较好的基金,为下步投资分析做好准备. 01.页面分析 我们的数据来源是东方

零基础的你还在纠结怎么学习Python编程吗?

想入门学IT,但不知道从哪门编程语言开始学起的同学有很多,小编建议,在编程语言的选择方面,如果你有自己感兴趣的方向,那么就最好选择自己的兴趣,毕竟有兴趣才能有耐心学习. 如果你是零基础,又暂时没有明确的目标,那么可以先从简单的Python语言入手.创一个小群,供大家学习交流聊天如果有对学python方面有什么疑惑问题的,或者有什么想说的想聊的大家可以一起交流学习一起进步呀.也希望大家对学python能够持之以恒python爱好群,如果你想要学好python最好加入一个组织,这样大家学习的话就比较

还在纠结用网站模板还是定制建站?看了后我再也不纠结了

从目前来看,通过建站模板做网站是最为简单的一种方式.可是简单归简单,很多人都会犹豫是选择模板建站的方式好,还是定制网站的方式好,其实这个要具体问题,具体分析.对个人用户和一些中小型企业来说,肯定是使用建站模板来做网站是比较好的,而对于大型的公司企业来说,定制制作网站的方式必定是首选.为什么这么说呢?大家可以看看下面的分析. 首先,是个人用户和中小型的企业.这部分的群体都有着很多共同的特征:一是本身不会任何的代码知识,缺乏做网站的技术:二是自身能用于制作网站的资金并不充裕:三是对网站都有着迫切的需

零基础、转行学习Python是否还在纠结?这里告诉你答案!

Python编程语言由于自身具有的"清晰"."简略"等特点而受到众多使用Python编程语言的IT从业者喜爱.而且,对于初学者来说,比起其他编程语言,Python 更容易上手.加上很多企业都使用Python编程语言,促进了Python程序员的市场需求量增加. 转行零基础学Python编程开发难度大吗?从哪学起? 近期很多小伙伴问我,如果自己转行学习Python,完全0基础能否学会呢?Python的难度到底有多大? 今天,小编就来为大家详细解读一下这个问题. 学习Py

怎样的生活才美好?

怎样的生活才美好? 有时候,自己在想自己想要过什么样的生活,怎样的生活才美好? 过了这么多夜以继日的生活,想想自己到底是为了什么?都说大学时代是最美好的,但是在同学朋友都在欢度清明/五一的时候,确实自己正好通宵达旦的日子,这么整的时间,不用上课不用到处跑可以将整段时间来研究一个问题,或是做一个小的项目,这样好的不用拆开用的时间怎么可能舍得浪费?突然发现自己大二以来舍弃了不知多少周末与节假日,又有了多少个像今天一样的不眠之夜!大一的时候确实痛快的玩过,包括青年志愿者协会与各种兴趣协会等,但是之后自

工具分享:GameplayKit苹果手游开发工具简析

6月9日WWDC2015大会上,苹果宣布iOS 9将推出两个非常重要的手游开发工具GameplayKi和ReplayKit,这两个工具对于iOS手游开发者及欧美游戏视频相关领域可能会产生比较大的影响.GameplayKit开发工具极有可能成为今后iOS手游开发的主流工具,小爱在这里向大家简单介绍下这款工具,有兴趣的iOS开发者可以尽早get新技能. GameplayKit是什么? GameplayKit是一款帮助新手开发者们在OS X和iOS平台创作游戏的基础工具和技术框架,它能提供游戏资源.模

初出茅庐(三)

不知不觉已经将近十一月了,回顾之前学习的历程,充实而又忙碌,每天除了学习还是学习,但面对新知识的理解和注入,我的内心的期待的. 我始终相信人外有人天外有天,我花费了这么长时间才掌握的知识聪明的人用的时间肯定比我少甚至比我掌握的要好,我必定不是属于聪明的那一堆人,但我坚信勤能补拙,只要我贵在坚持,一定可以实现梦想. 在秋招季的尾声,学校开展了一场大型的校园招聘会,形形色色的企业都有,我选择了几家互联网公司投递了简历应聘前端开发工程师.过了两天,总算是有家公司给我了面试的机会,看了下地址在闵行,嗯有

深入了解Generator

要理解generator,我们先从迭代(iteration)与迭代器(iterator)讲起.当然,本文的重点是generator,iteration与iterator的知识将点到即止 迭代是重复反馈过程的活动,其目的通常是为了接近并到达所需的目标或结果.每一次对过程的重复被称为一次"迭代",而每一次迭代得到的结果会被用来作为下一次迭代的初始值. 以上是维基百科对迭代的定义.在python中,迭代通常是通过for ... in ...来完成的,而且只要是可迭代对象(iterable),