React-redux 소스코드 분석(코드)

이 글은 React-redux의 소스코드 분석(코드)을 담고 있습니다. 도움이 필요한 친구들이 참고하시면 좋겠습니다.

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
    }

일반적인 접근 방식은 먼저 redux를 통해 스토어를 생성한 다음 이를 Provider 구성 요소의 store 속성에 할당하는 것입니다. Provider 구성 요소 내에서 저장소를 가져와서 컨텍스트 속성으로 설정하면 모든 구성 요소가 컨텍스트를 통해 저장소를 가져올 수 있습니다.

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

관련 추천 :

YII 소스코드 분석, YII 소스코드 분석

Symfony2 소스코드 분석 시작 프로세스 2, Symfony2 소스코드

위 내용은 React-redux 소스코드 분석(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!