ReactRedux学习
2016-07-21 16:02
429 查看
ReactRedux是react和redux合用时需要的组件。
检测环境,挂载reactredux
功能代码整体结构如下,采用_ webpack_require_方法帮助各个模块相互获取,可以看出最终对外导出的是模块0
各模块功能
0:最终导出的属性和方法,Provider和connet
1:react
2:对store属性类型(subscribe,dispatch,getState方法)的检验
3:异常
4:Provider
5 : connect
6:shallowEqual,判断两个对象是否相等
7:bindActionCreators,redux的方法,自动dispatch action
8:hoistNonReactStatics,将源组件除react属性的属性复制到目标组件
9:invariant
10、11、12:plain object对象校验
13:redux
以上各模块,基本都是Provider和connet的辅助模块
Provider的作用是在props中保存store,并且采用react的getChildContext这一方法,使自组件可以直接访问store
用法如下
store就是采用redux生成的
[mapStateToProps(state, [ownProps]): stateProps]: 第一个可选参数是一个函数,只有指定了这个参数,这个关联(connected)组件才会监听 Redux Store 的更新,每次更新都会调用 mapStateToProps 这个函数,返回一个字面量对象将会合并到组件的 props 属性。 ownProps 是可选的第二个参数,它是传递给组件的 props,当组件获取到新的 props 时,ownProps 都会拿到这个值并且执行 mapStateToProps 这个函数。
[mapDispatchProps(dispatch, [ownProps]): dispatchProps]: 这个函数用来指定如何传递 dispatch 给组件,在这个函数里面直接 dispatch action creator,返回一个字面量对象将会合并到组件的 props 属性,这样关联组件可以直接通过 props 调用到 action, Redux 提供了一个 bindActionCreators() 辅助函数来简化这种写法。 如果省略这个参数,默认直接把 dispatch 作为 props 传入。ownProps 作用同上。
如前所述,这个 connected 的组件必须放到 的容器里面,当 State 更改的时候就会自动调用 mapStateToProps 和 mapDispatchProps 从而更新组件的 props。 组件内部也可以通过 props 调用到 action,如果没有省略了 mapDispatchProps,组件要触发 action 就必须手动 dispatch,类似这样:this.props.dispatch(someActionCreator(‘arg’))。
源码整体结构
代码整体结构和redux相似:检测环境,挂载reactredux
功能代码整体结构如下,采用_ webpack_require_方法帮助各个模块相互获取,可以看出最终对外导出的是模块0
function(react, redux) { return(function(modules) { function __webpack_require__(moduleId) { //根据模块id获取后面数组中的模块 return module.exports; } return __webpack_require__(0); ) ([//模块0-13]) })
各模块功能
0:最终导出的属性和方法,Provider和connet
1:react
2:对store属性类型(subscribe,dispatch,getState方法)的检验
3:异常
4:Provider
5 : connect
6:shallowEqual,判断两个对象是否相等
7:bindActionCreators,redux的方法,自动dispatch action
8:hoistNonReactStatics,将源组件除react属性的属性复制到目标组件
9:invariant
10、11、12:plain object对象校验
13:redux
以上各模块,基本都是Provider和connet的辅助模块
Provider
Provider是一个react组件,在使用reactredux时,它默认为react组件数的最顶端,但是它自己本身没有dom信息,render直接返回子组件Provider的作用是在props中保存store,并且采用react的getChildContext这一方法,使自组件可以直接访问store
用法如下
render( <Provider store={store}> <Main /> </Provider>, dom );
store就是采用redux生成的
connect
connect()返回一个函数,这个返回的函数来接受一个组件类作为参数,最后返回和 Redux store 关联起来的新组件,使用如下connect([mapStateToProps], mapDispatchToProps], [mergeProps], [options])(mainComponent)
[mapStateToProps(state, [ownProps]): stateProps]: 第一个可选参数是一个函数,只有指定了这个参数,这个关联(connected)组件才会监听 Redux Store 的更新,每次更新都会调用 mapStateToProps 这个函数,返回一个字面量对象将会合并到组件的 props 属性。 ownProps 是可选的第二个参数,它是传递给组件的 props,当组件获取到新的 props 时,ownProps 都会拿到这个值并且执行 mapStateToProps 这个函数。
[mapDispatchProps(dispatch, [ownProps]): dispatchProps]: 这个函数用来指定如何传递 dispatch 给组件,在这个函数里面直接 dispatch action creator,返回一个字面量对象将会合并到组件的 props 属性,这样关联组件可以直接通过 props 调用到 action, Redux 提供了一个 bindActionCreators() 辅助函数来简化这种写法。 如果省略这个参数,默认直接把 dispatch 作为 props 传入。ownProps 作用同上。
一个具体一点的例子
import React, { Component } from 'react'; import someActionCreator from './actions/someAction'; import * as actionCreators from './actions/otherAction'; function mapStateToProps(state) { return { propName: state.propName }; } function mapDispatchProps(dispatch) { return { someAction: (arg) => dispatch(someActionCreator(arg)), otherActions: bindActionCreators(actionCreators, dispatch) }; } class App extends Component { render() { // `mapStateToProps` 和 `mapDispatchProps` 返回的字段都是 `props` const { propName, someAction, otherActions } = this.props; return ( <div onClick={someAction.bind(this, 'arg')}> {propName} </div> ); } } export default connect(mapStateToProps, mapDispatchProps)(App);
如前所述,这个 connected 的组件必须放到 的容器里面,当 State 更改的时候就会自动调用 mapStateToProps 和 mapDispatchProps 从而更新组件的 props。 组件内部也可以通过 props 调用到 action,如果没有省略了 mapDispatchProps,组件要触发 action 就必须手动 dispatch,类似这样:this.props.dispatch(someActionCreator(‘arg’))。
相关文章推荐
- MVVM-Reactive框架
- React Native 小米(红米)手机安装失败、白屏 Failed to establish session 解决方案
- React和动态网站接口的经济学
- ReactNative学习笔记-Native主动发送消息给JS
- 关于react-native navigator 记录
- Android原生应用集成ReactNative坑总结
- React Native backgroundColor 的颜色值
- React Native 之样式总结
- 浅析angular,react,vue.js jQuery使用区别
- windows android react-native 环境安装
- Spring 4 + Reactor Integration Example--转
- [React Native] Up and Running
- react-native init 项目后出现 unexpected token <
- react 学习网站,够全
- React中使用Ant Table组件
- 《React-Native系列》5、RN实现弹出选择界面与动画效果
- React Native Tutorial摘要(一)
- [ZeroMQ] libzmq 源码阅读 之 Reactor机制(mailbox, event)
- React Native 真机运行配置1
- React Native真机调试