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屬性辛慰，請(qǐng)看源碼区匠。
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
}
核心代碼就這么多，顯然帅腌，它是一個(gè)容器組件驰弄。
關(guān)鍵點(diǎn)在：getChildContext,保存了全局唯一的store,類似于全局變量，子組件后續(xù)可以通過this.context.store來訪問狞膘。
通過context傳遞屬性的方式可以大量減少通過props 逐層傳遞屬性的方式,可以減少組件之間的直接依賴關(guān)系揩懒。
使用示例
最近在寫項(xiàng)目，在我的項(xiàng)目中就使用了provider組件挽封，想看更詳細(xì)的用法已球，可以看https://github.com/second-Sale/second-sale代碼。
