正式学习React(五) react-redux源码分析

磨刀不误砍柴工，咱先把react-redux里的工具函数分析一下：

源码点这里

 shallowEqual.js

 1 export default function shallowEqual(objA, objB) {
 2   if (objA === objB) {
 3     return true
 4   }
 5
 6   const keysA = Object.keys(objA)
 7   const keysB = Object.keys(objB)
 8
 9   if (keysA.length !== keysB.length) {
10     return false
11   }
12
13   // Test for A‘s keys different from B.
14   const hasOwn = Object.prototype.hasOwnProperty
15   for (let i = 0; i < keysA.length; i++) {
16     if (!hasOwn.call(objB, keysA[i]) ||
17         objA[keysA[i]] !== objB[keysA[i]]) {
18       return false
19     }
20   }
21
22   return true
23 }

这个几个api全都超级简单，我就不仔细讲解了，顾名思义，简单比较一下两个obj是否相等。

storeShape.js

1 import { PropTypes } from ‘react‘
2
3 export default PropTypes.shape({
4   subscribe: PropTypes.func.isRequired,
5   dispatch: PropTypes.func.isRequired,
6   getState: PropTypes.func.isRequired
7 })

顾名思义，强制性规定subscribe,dispacth,getState必须是func.

warning.js

 1 /**
 2  * Prints a warning in the console if it exists.
 3  *
 4  * @param {String} message The warning message.
 5  * @returns {void}
 6  */
 7 export default function warning(message) {
 8   /* eslint-disable no-console */
 9   if (typeof console !== ‘undefined‘ && typeof console.error === ‘function‘) {
10     console.error(message)
11   }
12   /* eslint-enable no-console */
13   try {
14     // This error was thrown as a convenience so that if you enable
15     // "break on all exceptions" in your console,
16     // it would pause the execution at this line.
17     throw new Error(message)
18     /* eslint-disable no-empty */
19   } catch (e) {}
20   /* eslint-enable no-empty */
21 }

就是用console.error 打印一下错误。

wrapActionCreators.js

1 import { bindActionCreators } from ‘redux‘
2
3 export default function wrapActionCreators(actionCreators) {
4   return dispatch => bindActionCreators(actionCreators, dispatch)
5 }

上一篇讲过 bindActionCreators

它返回的这个对象直接是以 我们定义单个actionCreator为key的，actionCreator函数为value的包装，并在actionCreator里挂着了dispacth的函数。使用的时候，直接调用同名key函数，就直接分发action了，不需要

我们手动的 dispacth(actionCreator(内容))， 直接key(内容) 就行了。

------------------------------------------------------工具全部介绍完毕-----是不是so easy??!!!------------------------------

 现在主角登场：

Provider.js

 1 import { Component, PropTypes, Children } from ‘react‘
 2 import storeShape from ‘../utils/storeShape‘
 3 import warning from ‘../utils/warning‘
 4
 5 let didWarnAboutReceivingStore = false
 6 function warnAboutReceivingStore() {
 7   if (didWarnAboutReceivingStore) {
 8     return
 9   }
10   didWarnAboutReceivingStore = true
11
12   warning(
13     ‘<Provider> does not support changing `store` on the fly. ‘ +
14     ‘It is most likely that you see this error because you updated to ‘ +
15     ‘Redux 2.x and React Redux 2.x which no longer hot reload reducers ‘ +
16     ‘automatically. See https://github.com/reactjs/react-redux/releases/‘ +
17     ‘tag/v2.0.0 for the migration instructions.‘
18   )
19 }
20
21 export default class Provider extends Component {

//关键部分，将this.store加到了context里，这里，子组件就可以通过context直接拿到store，不需要一级一级props传递下去。
22   getChildContext() {
23     return { store: this.store }
24   }
25
26   constructor(props, context) {
27     super(props, context)
28     this.store = props.store
29   }
30
31   render() {
32     return Children.only(this.props.children)
33   }
34 }
35
36 if (process.env.NODE_ENV !== ‘production‘) {
37   Provider.prototype.componentWillReceiveProps = function (nextProps) {
38     const { store } = this
39     const { store: nextStore } = nextProps
40
41     if (store !== nextStore) {
42       warnAboutReceivingStore()
43     }
44   }
45 }
46
47 Provider.propTypes = {     //要求我们的 store对象里面的3个必须是func
48   store: storeShape.isRequired,

//要求我们形如这种格式的 <Provider store={store}> <App/> </Provider> ，<App>必须是react的element，其实它还要求了只能是放单element的，这也是render这个本身限定的！！可以看上面的Children.Only()
49   children: PropTypes.element.isRequired
50 }    // 这个是和getChildContext一样，必须加的。

//访问context 的属性是需要通过 contextTypes 指定可访问的 元素一样。getChildContext 指定的传递给子组件的属性需要先通过 childContextTypes 来指定，不然会产生错误。
51 Provider.childContextTypes = {
52   store: storeShape.isRequired
53 }

关于context的用法，我在github上写了一个小demo。大家可以clone下来跑一跑，在我的代码基础上可以添加一下状态函数，看看react的状态生命周期的流程。点这里

对于上面的代码总结一下，Provider这个React 组件就是为了将Store挂在到Context中，然后我们写的APP 里就可以获得store了。