react-redux provider組件

provider組件概念圖

 

react-redux provider組件概念圖

provider組件的作用

• provider包裹在根組件外層，使所有的子組件都可以拿到state。示例：

import React from 'react'; import {render} from "react-dom"; import {createStore} from 'redux'; import {Provider} from "react-redux"; import App from "./containers/App"; import reducer from "./reducer/index"; const store = createStore(reducer); render( <Provider store={store}> <App/> </Provider>, document.getElementById('app')); 

• 它接受store作為props，然后通過context往下傳，這樣react中任何組件都可以通過context獲取store。

provider組件的原理

• 它的原理是React組件的context屬性，請看源碼。

export default class Provider extends Component { getChildContext() { return { store: this.store } } constructor(props, context) { super(props, context) this.store = props.store } render() { return Children.only(this.props.children) } } Provider.propTypes = { store: storeShape.isRequired, children: PropTypes.element.isRequired } Provider.childContextTypes = { store: storeShape.isRequired } 

核心代碼就這么多，顯然，它是一個容器組件。
關鍵點在：getChildContext,保存了全局唯一的store,類似於全局變量，子組件后續可以通過this.context.store來訪問。

通過context傳遞屬性的方式可以大量減少通過props 逐層傳遞屬性的方式,可以減少組件之間的直接依賴關系。

使用示例

最近在寫項目，在我的項目中就使用了provider組件，想看更詳細的用法，可以看https://github.com/second-Sale/second-sale代碼。

作者：落花的季節
鏈接：https://www.jianshu.com/p/2501a9703d13
來源：簡書