进阶(持续更新....)
上期是我们最基础的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 自动发出
(若有扩展持续更新!.....)