在Redux中最核心的天然是組件,以及組件相關的事件與數據流方式。可是咱們在Redux中並無採用傳統的方式在getInitialState()中去初始化數據,而是採用Provider統一處理,省去了開發者很多工做,可是Redux到底如何將state中的數據傳遞給各組件的呢?還得看看Provider的源碼實現(微信:react-javascript)。javascript
1.經常使用數據傳遞寫法java
在ReactJS中的數據傳遞通常採用state和props,而props做爲父組件向子組件的主要方式。如:react
const TodoList = ({ todos, onTodoClick }) => (安全
<ul>微信
{todos.map(todo =>ide
<Todo函數
key={todo.id}this
{...todo}對象
onClick={() => onTodoClick(todo.id)}事件
/>
)}
</ul>
)
以上代碼能夠看出key, todo數據對象,包括onClick函數都是採用props的方式傳遞給Todo子組件的。
可是做爲統一的數據傳遞方式Provide,是怎樣作的呢。
2.Provider的實現方式。
在咱們在調用Provider時,採用的是如下的方式:
const store = createStore(reducer)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
a.首先咱們看到的是先建立store對象;
b.而後將store傳遞給Provider;
c.而後將應用組件作爲Provider的子組件。
不過問題又來了:咱們並無看到Provider將store做爲props傳遞給子組件啊。
3.Provider源碼實現
打開Provider源碼,咱們看到Provider的源碼實現並很少,除去一些安全性檢查的代碼外,僅僅剩下面的代碼。
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是經過getChildContext的的方式傳遞給子組件的,而且咱們也在connect中看到子組件取數據的過程:constructor(props, context) {
super(props, context)
this.version = version
this.store = props.store || context.store
.......
}
在沒有定義props的狀況下,經過context直接取得store中的數據,或者說取得context中的數據。而常見的場景通常以下:
<Provider store={store}>
<App />
</Provider>