听说你需要这样学习Redux

Redux 学习总结

1.前言

对于复杂的 Web 交互应用,相继出现了一系列的 MV* 框架,然而双向绑定的数据流容易让数据变得不可控制。

在任何应用中管理数据都是必不可少的。通过用户界面来编排数据流是一项具有挑战的工程。现代的 Web 应用会涉及复杂的 UI 交互,比如改变了一个地方的 UI 数据,需要直接或者间接的改变其他地方的 UI 数据。一些双向绑定的框架(比如:Angular.js 等)都是对这种场景比较好的解决方案。

对于一些应用(尤其是数据流比较简单的),这种双向绑定是非常快速和足够的解决方案。但是对于一些更加复杂的应用场景,数据双向绑定已经被证明是不够的,它会妨碍用户界面的设计。实际上,React 并没有解决这样一个复杂应用中比较复杂的数据流问题(虽然后面出现了 Flux 这种解决方案),但是他确实解决了一个组件中数据流的问题

React 的横空出世一度让 Web App 的概念如火如荼,这种单向的数据流也就需要新的模式来组织。

在这个过程中对状态的管理相继出现了 Flux 等解决方案,在后来的发展中,Redux 由于单一的 Store 让大家更是喜欢。

2.入门

2.1概念

2.1.1 Store

Redux是管理整个APP的状态,Store是用来存储整个APP状态。
Store还有几个API: 组件获取状态的接口 getState()、组件通过 action 和数据进行 dispath 更新 Store 的接口 dispatch(action)、Store 发生改变之后进行 subscribe 改变组件 view 的接口 subscribe()。
getState():获取当前的state树;
dispatch(action):触发一个action,创建state;
subscribe(listener):
replaceReducer(nextReducer)

2.1.2 action

action是用来接收一个指示和数据,通过action进行dispatch来根据这个动作和数据进行Store的更新。
简单来只要想让改变Store里面的state就要触发action。
常见的action写法:

   type:'ACTIONS',
   text:{
          content:'xxxx'  
   }   
2.1.3 reducer

reducer是action和store关联的中间一层,也是一个普通的函数,用来修改store的状态。
Store中数据的更新通过触发action进行dispatch,action会有一个type和一个text,但是并没有去直接更新数据。而是用reducer接受action的type和text,根type来进行数据的整合,根据原来的Store中的state和action的type和text生成新的state给Store,进行Store的更新。
combineRedecers(reducers):当我们的应用比较复杂的时候,我们可能会分开写好几个reducer,这个函数的作用就是把这些单独的reduce合并为一个大的reduce,需要注意的是我们的state的结构和我们的各个reducer是一一对应的。

总结

Redux 只有一个单一的数据源,并且这个数据源是只读的,修改这个数据源必须通过 dispatch action,action 只是告知了 type 和 text,这个时候 reducer 结合上一个 state 和 action 做出自己的响应,返回新的 state 送入 store。

在 reducer 中,他接收上一个 state 与 action,返回一个新的 state。这个过程是纯函数式的,返回的结果由进去的参数决定,不会随着外界的变化而发生改变。

使用

自己搭建一个简单的redux的React Native项目
https://github.com/qizhenshuai/Ethan.git

react-redux

react native在数据状态发生变化的时候就会进行render,从而会发生布局的变化。我们一会都会在shouldComponentUpdate来处理一个数据变化,但是对于一个界面来的数据来说就显得非常的麻烦,同时也会消耗不小的一笔开销。
react-redux的出现就解决了这个问题,同时使整个APP的灵活性和可维护性大大的提高。
其实react和redux并没有任何的关系,redux主要是通过了一个全局的store,react是从store中取出数据,store如果发生了变化,react就会重新进行渲染。

react-redux的API

<Provider store> 和 connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])。


Provider 是在原有的 APP 上面包一层,然后接收 store 作为 props,然后给 connect 用。
connect 应该是 react-redux 的核心。他接收 store 提供的 state 和 action,返回给我们的 react 组件;还有一个很重要的一点是在 connect 这层 react-redux 做了优化,保证给组件只传和他相关的 state,这也就保证了性能上的优势
connect 接收 store 提供的 state 和 action,返回给我们的 react 组件;还有一个很重要的一点是在 connect 这层 react-redux 做了优化,保证给组件只传和他相关的 state,这也就保证了性能上的优势
mapStateToProps 接收两个参数 state、ownProps,通常情况下我们只需要第一个参数,如果有第二个参数 ownProps,其也将传给组件的 props,并且当组件的 props 发生变化时也会调用 mapStateToProps。
action 就是 mapDispatchToProps,他可以是个函数,也可以是个对象。如果是个函数,这个函数将接收一个 dispatch 函数,然后由我们决定返回怎样的一个对象,这个对象会通过 dispatch 函数与 action creator 绑定起来;如果是个对象,则这个对象中的函数都会被当做 action creator,而且这个对象会与 store 绑定在一起,其中所定义的方法名将作为属性名,合并到组件的 props 中。一般情况下会省略这个参数。


3.后言

Redux还有一些中间件比如redux-thunk、redux-saga等等,理解这些会让你的redux更新方便的实现状态的管理。以上都是自己学习的一些理解分享给大家,以后一起学习,共同进步。

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

推荐阅读更多精彩内容