Analyse du code source de React-redux (code)

Le contenu de cet article concerne l'analyse du code source (code) de React-redux. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

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
    }

L'approche habituelle est de créer d'abord le magasin via Redux, puis de l'attribuer à l'attribut store du composant Provider . Dans le composant Provider, récupérez le magasin et définissez-le sur l'attribut de contexte, afin que tous ses composants puissent accéder au magasin via le contexte.

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

Recommandations associées :

Analyse du code source YII, Analyse du code source YII

Démarrage de l'analyse du code source Symfony2 processus 2, code source de symfony2

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!