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

 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 }

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 })

 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 }

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

 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 }