Source code analysis of React-redux (code)

This article brings you the source code analysis (code) of React-redux. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Provider

   //最后导出的是createProvider()。所以一开始storeKey应该是以默认值‘store’传进去的
   function createProvider(storeKey = 'store', subKey) {
   const subscriptionKey = subKey || `${storeKey}Subscription`

   class Provider extends Component {
       //设置context，能让子组件拿到store
       //相当于返回 {store: this.store}
       getChildContext() {
         return { [storeKey]: this[storeKey], [subscriptionKey]: null }
       }

       constructor(props, context) {
         super(props, context)
         //this.store = props.store
         this[storeKey] = props.store;
       }

       render() {
         //只能有一个子组件
         return Children.only(this.props.children)
       }
   }
   
   //props和context类型验证
   Provider.propTypes = {
       store: storeShape.isRequired,
       children: PropTypes.element.isRequired,
   }
   Provider.childContextTypes = {

             [storeKey]: storeShape.isRequired,
            [subscriptionKey]: subscriptionShape,
        }
    
            return Provider
    }

The usual approach is that we first create the store through redux, and then assign it to the store attribute of the Provider component. Inside the Provider component, get the store and set it to the context attribute, so that all its components can get the store through the context.

   <Provider store={store}>
       <App />
   </Provider>

Related recommendations:

YII source code analysis, YII source code analysis

##Symfony2 source code analysis startup process 2, symfony2 Source code

The above is the detailed content of Source code analysis of React-redux (code). For more information, please follow other related articles on the PHP Chinese website!