浅谈从React到Redux

关于redux的发展,其实我也不太清除,似乎使用React的都会过度到Redux,大概算是React的全家桶之一吧,这里在了解Redux之前,不妨先了解下React设计应用的一些特性:

React 算是V层框架,它的组件化开发和单向数据流构特性构成了它设计的核心思想,组件化开发,将一个页面划分成多个组件,独立开发每块功能独立的组件 ,使得页面灵活可插拔可复用,然而组件的独立划分也必然会带来组件间的数据交互问题,因此对应提出了单向数据流的特性,要求设计好state数据结构,并放置在合理的位置,使得数据最大化的单向流动,然而尽管如此,在实际开发中,我们仍避免不了使用反向数据流,详见thinking React


一般来说,React的这两个特性,基本能合理设计并开发出许多结构不错的应用,但随着应用的规模庞大,把state作为数据层,就需要多个数据层(state)对应多个组件(view) ,那么假设state和view交互构成了如下数据流:

随着应用的庞大,一些反向数据流的存在就会造成错综复杂,不可预测的问题。

然而在Redux认为,用户在view层对数据的操作只能发起action,也就是将上面的数据流结构转换为如下结构:


从上图可以看出,引入了actions,从而将错综复杂的数据流变成了单向数据流(这里暂时不管圆圈里面是什么),进而强化了React的单向数据流的核心思想。

因此,引入了redux使得数据的变动变得可追溯,结构更清晰。


有了上面的过度后,接下来就该讨论,redux是如何做到这种数据流动的,关于redux的设计核心,这里先设计这幅循环图来直接解释:


上图是一个比较好解释redux数据流的循环图,这幅图里有五个部分五个箭头,这里就先简单介绍这五大块,再对每块具体操作详细分析。

1. 有defines箭头可以看出,只有State的变化才会引起UI的变化。

2. 由triggers箭头可以看出,UI 只能统一触发 Actions操作。

3. 由sent to可以看出,Actions需要分发(dispatch)到Reducers上去决定如何执行。

4. 由Updates可以看出,Reducers可以更新Store中的状态,然而Store中的状态是什么呢?

5. 由contains可以看出Store可以认为是State的集合,也就是说,Reducers决定着State如何改变,Store用于统一化管理State。


那么Redux这种循环流向的特性,也就决定着在设计应用流程上应该遵照的统一化步骤:

1. 首先是actions,actions简单来说就是用户操作UI界面能发起的动作,它其就是用json对象定义的,其中必须要有一个type字段,指明是哪种类型的操作,type字段的值一般是字符串,使用字符串常量会更好一些,同时可以传递该操作需要传递的参数。

2. 其次需要设计的是Reducers, Reducers其实是用来决定不同类型(type)的actions需要怎么修改state,(这也就意味着在此之前最好先考虑一下state结构的设计),Reducers必须是一个纯函数,它接受旧的state和actions,返回的是新的state,在redux-react中,可以根据类型不同设计不同的reducers,这也就对应着state结构中不同的字段了,最后将他们combine。

3. 对于combine的reducers,需要将其注册到统一且唯一的store中去才能达到统一化管理的效果,然而要想在react中引入store并在整个组件中使用,就需要react-redux提供的Providers组件了,用它来让React组件中共享store。

4. 关于UI组件,这里放在最后,其实也可以不这样,先设计UI组件也是可以的,只是这里要讨论state将要如何决定UI组件的改变,而且UI组件又如何发起action,这两步是打通整个循环的最基础也是最重要的一步,为了区分UI组件和交互相关,在Redux中提出了两种不同类型的组件,Components组件和Containers组件,两种组件可能对应于同一页面同一部分,但两者负责的任务不同,简单来说Components组件只负责展示,传递什么参数就渲染什么内容,而Container组件负责数据流入流出,决定组件需要什么数据和能触发什么actions,从某种模型上来说,Containers或许就是Components外层的一个包装,因此在某些特殊的情况中,可以将Components合并到Containers中去。

这里也展示了容器组件和展示组件之间的区别



因此对于Components组件来说,所有的数据都是通过组件的属性props来决定的。

对于containers组件来说,就需要决定哪些state的流入和哪些actions的流出或者说是分发(dispatch),因此也就有了两个函数  mapStateToProps和mapDispatchToProps,mapStateToProps提供两个参数,一个是整个state数据,另一个则是原始属性值Prop,它的返回值即是需要映射到组件数据(用于渲染页面)的state数据。

mapDispatchToProps提供一个dispatch函数参数,它其实是store的函数,用于分发action到reducers中去。mapDispatchToProp返回值就是一系列的方法,用于映射用户对UI的哪些操作对应需要分发哪些actions。

最后需要做的是将容器组件和展示组件绑定起来,这时候需要用到的方法就是react-redux提供的connect方法,connect方法是一个高阶函数,第一阶函数需要两个函数参数,其实就是上面所说的那两个函数,这两个参数是有顺序的,但又不是必须的,如果不需要传递null即可,第二阶函数则需要传递这两个函数绑定的组件,就像上图那样把组件装进容器里合并在一起,这样我们最中需要渲染展示的页面是connect后的组件,而不是之前所说的展示组件了,因为connect后的组件才会有数据流的传递,才能享受redux提供的数据状态循环流动的便利。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,809评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,189评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,290评论 0 359
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,399评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,425评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,116评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,710评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,629评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,155评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,261评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,399评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,068评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,758评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,252评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,381评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,747评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,402评论 2 358

推荐阅读更多精彩内容

  • 为了学习相关的原理,使用Empty Application模板建立工程;在开始输入正常学习的代码之前,要先:1、将...
    每日总结阅读 440评论 0 1
  • 版本1 让每个程序就做好一件事。如果有新任务,就重新开始,不要往原程序中加入新功能而搞得复杂。 假定每个程序的输出...
    饥人谷_晴天小雨多云阅读 1,030评论 1 2
  • 今天早上被妈妈叫醒,快速洗完脸后,吃早餐,鸡蛋汤,馒头,腐乳,狼吞虎咽吃完以后,穿好衣服出门买菜,去妈妈熟悉的“菜...
    二苗_5c0f阅读 225评论 0 1
  • 像我,我很喜欢看电影。我主动买票约他看电影,看的是他喜欢的类型,不是我自己喜欢的。好感恩。这种爱从哪里来?从我所亲...
    陈悦_55fd阅读 267评论 0 0