react-native (四 - 下) : redux

进阶(持续更新....)

上期是我们最基础的redux的使用方式,通过调用reducer执行action来最终修改我们的state.但是相信很多下载了开源项目的朋友发现,他们在操作redux的时候的代码和我们上述的代码差距甚远,他们用的很多东西感觉都不属于redux的一部分,下面列举一些常用的redux关联的词汇

combineReducers:随着应用变得复杂,需要对reducer函数进行拆分,拆分后的每一块独立负责管理state的一部分。combineReducers(reducers)

applyMiddleware

使用包含自定义功能的 middleware(中间件) 来扩展 Reduxredux applyMiddleware 原理剖析

redux-thunk :支持 dispatch function,以此让 action creator 控制反转。被 dispatch 的 function 会接收dispatch作为参数,并且可以异步调用它。这类的 function 就称为thunk

redux-persist:处理大量的状态需要持久化的操作的中间件

上面这些进阶件只是开源软件中很小的一部分,是现今最火也是最常用的几种,但是的目的都是为了让用户操作redux更加方便,调试方式更加友善,如果你不用这些中间件其实也并不会出现大问题。

加载了中间件后的实战中操作修改redux状态的一般流程:

Action

这里的所说的Action和Redux文档里面的action不一样,这里表示用户操作和流程操作这个动作,比如我们登录时候的HandleLogin一样

Dispatcher

用户操作接收到后,经过逻辑处理之后,找到特定的修改redux方法后进行派发

Stores

store保存我们app的状态对象和操作这些对象的reducer,redux action,最后根据界面逻辑进行刷新界面(shouldComponentUpdate方法)

看过流程之后我们还是从项目中的代码看起,打开我们的src/app.js

返回的是一个被provider标签包裹的 Root,在store上赋值了一个store属性,我们从外看到内。Provider是什么?Provider

Makes the Redux store available to the connect() calls in the component hierarchy below. Normally, you can’t use connect() without wrapping a parent or ancestor component in.

If youreallyneed to, you can manually pass store as a prop to every connect()ed component, but we only recommend to do this for stubbing store in unit tests, or in non-fully-React codebases. Normally, you should just use.

我们了解到,provider包裹的组件,可以让他的子组件通过connect方法来获取他的store

store的构造函数来自文件'./store',进入这个文件我们终于看到了上面说的那些常用的中间件。

const store=autoRehydrate()(createAppStore)(reducers);

可能那一串代码比较难看懂,那么我们展开他来看。


autoRehydrate()它将返回一个可作用于 Store 的函数,我们记为:rehydrator。rehydrator作用于我们的Store,可将之前存储于本地的 Store 对象用当前的 Store 的state进行自动更新。

persistStore函数处理 Store 保存到本地存储相关的逻辑。这其中,我们配置使用了react-native 内置的异步存储系统)。autoRehydrate()和persistStore()实际就是我们用来实现离线数据同步的所有代码了。

(持续扩充.....)

我们的createAppStore对象是来自applyMiddleware的创建  how applyMiddleware work , 它添加了log 和thunk两种中间件。 那么我们现在就得到了一个具有日志且可以控制反转的redux store了。 我们包裹到跟节点的外部,这样我们子节点想用到store的时候就可以通过connect方法取出store。

而这个store的reducer是来自'./reducer/reducer/index.js' 

combineReducers

是用于拆分reducer,我们可以变相的理解它为一个键值对,这样某个模块就可以根据key来找到特定的reducer,不需要关注所有的reducer。



how does connect work(一)  how does connect work (二)

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

第二篇有connect的原理。

简单的说来就是Connect将传入的root组件绑定好了store tree上的所有state。

mapStateToProps

[mapStateToProps(state, ownProps) : stateProps]

这个函数允许我们将 store 中的数据作为 props 绑定到组件上

mapStateToProps是一个函数,作为函数,mapStateToProps执行后应该返回一个对象,里面的每一个键值对就是一个映射mapStateToProps会订阅 Store,每当state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染,mapStateToProps的第一个参数总是state对象,还可以使用第二个参数,代表容器组件的props对象,使用ownProps作为第二个参数后,如果容器组件的参数发生变化,也会引发 UI 组件重新渲染,connect方法可以省略mapStateToProps参数,那样的话,UI 组件就不会订阅Store,就是说 Store 的更新不会引起 UI 组件的更新,函数的第二个参数 ownProps ,是 MyComp 自己的 props

再简单点!你使用的键值对的key就是你当前文件能使用的this.state 在store tree中映射属性的别名!

[mapDispatchToProps(dispatch, ownProps): dispatchProps]

它的功能是,将 action 作为 props 绑定到 MyComp 上,Redux 本身提供了 bindActionCreators 函数,来将 action 包装成直接可被调用的函数

mapDispatchToProps是connect函数的第二个参数,用来建立 UI 组件的参数到store.dispatch方法的映射,也就是说,它定义了哪些用户的操作应该当作 Action,传给 Store。它可以是一个函数,也可以是一个对象,如果mapDispatchToProps是一个函数,会得到dispatch和ownProps(容器组件的props对象)两个参数,如果mapDispatchToProps是一个对象,它的每个键名也是对应 UI 组件的同名参数,键值应该是一个函数,会被当作 Action creator ,返回的 Action 会由 Redux 自动发出

(若有扩展持续更新!.....)

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

推荐阅读更多精彩内容