如何理解Redux的流程

随笔

最近需要把公司项目重构,于是把react redux断断续续看了2个星期,才大致清楚了流程和用法,感觉初入还是有一些坑的。

推荐阅读顺序

  1. react 推荐阮一峰react教程,这是最简单的react教程 ,但并没有使用es6的语法来编写。
  2. webpack 阮一峰webpack教程ES6,如果不使用webpack打包的话,解析和浏览器兼容的问题会很大
  3. reflux 可以稍微了解一些,帮助了解redux结构
  4. Redux 虽然阮一峰的教程也好,但是还是更推荐 Redux中文文档,看理论上的东西不如跟着文档的教程走一下,虽然这个文档很详细了,但是我还是花了一点时间才能理顺。
  5. 注意:Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。尽管如此,Redux 还是和 ReactDeku 这类框架搭配起来用最好!
  6. 使用react之后尽量可以慢慢抛弃jquery了

笔记

初看 Redux中文文档,依然有很多不明白的地方,特别是store,reducer,action之间的联系。好在后来慢慢熟悉了。

我眼里的react+redux开发步骤:(以重构项目为例)

  1. 编写组件

把页面需要呈现的UI划分为不同的组件,然后依次用react改写之前的html页面中jquery插件和各个UI部分。

  1. 组织state结构

state其实是最容易但是确实最难理解的一部分,state可以看做是一个虚拟的树结构,它并不像一个实体对象,需要事先全部声明有哪些类型有哪些字段,而是在你编写组件以及action和reducer过程中会动态根据你的定义而改变,当然你自己得清楚你的state整个结构 并且最好是以一个json的格式写下来,在重构的过程中不断的修改和完善。

  1. action

action相对容易理解,我把它比作一个 好的函数名(坏的函数名:abc(){} ) 类似 getElementByID("id"),为什么不是函数,而是函数名字,因为 action只做了函数名该做的事情,只描述给我们听:如果调用该action 会发生生么。这里告诉我们即将会发生的就是 根据id获取该元素。

  1. reducer

如果说action的功能是函数名,那reducer就是实际操作者了,所以reducer就是函数的实现步骤。因此,state的状态在这里进行改变,要注意的是,并不是用我们所理解的“重新赋值”来改变state,而是根据你需要的功能重新生成一个state,把新的state返回出来。这里涉及到一个纯净函数pure function的思想,我们只要知道在reducer里面不要进行修改赋值,这样的话state永远要么是之前的状态要么是新的状态,而不会有修改错误的状态了。

  1. store

之前讲的都比较容易懂,那什么是store?
store就是联系action和reducer的东西,我们可以通过传入写好的reducer来创建一个store, 然后我们通过store来执行需要执行的action,因此他们之间就联系在了一起,而此时你根本不需要去管view该如何渲染,因为在使用react编写ui组件的时候已经把组件和state联系在了一起。所以redux的流程就是:

使用通过reducer创建出来的Store发起一个Action,reducer会执行相应的更新state的方法,每当state更新之后,view会根据state做出相应的变化!

注意:再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时,你应该使用 reducer 组合而不是创建多个 store。

ok
流程就是这样了

理解并不难,难的是动手~

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

推荐阅读更多精彩内容