知食记
搜索文档…
Provider
connect方法生成容器组件以后,需要让容器组件拿到state对象,才能生成 UI 组件的参数。
一种解决方法是将state对象作为参数,传入容器组件。但是,这样做比较麻烦,尤其是容器组件可能在很深的层级,一级级将state传下去就很麻烦。
React-Redux 提供Provider组件,可以让容器组件拿到state
1
2
import { Provider } from 'react-redux'
3
import { createStore } from 'redux'
4
import todoApp from './reducers'
5
import App from './components/App'
6
7
let store = createStore(todoApp);
8
9
render(
10
<Provider store={store}>
11
<App />
12
</Provider>,
13
document.getElementById('root')
14
)
Copied!
上面代码中,Provider在根组件外面包了一层,这样一来,App的所有子组件就默认都可以拿到state了。
它的原理是React组件的context属性,请看源码。
1
class Provider extends Component {
2
getChildContext() {
3
return {
4
store: this.props.store
5
};
6
}
7
render() {
8
return this.props.children;
9
}
10
}
11
12
Provider.childContextTypes = {
13
store: React.PropTypes.object
14
}
Copied!
上面代码中,store放在了上下文对象context上面。然后,子组件就可以从context拿到store,代码大致如下。
1
class VisibleTodoList extends Component {
2
componentDidMount() {
3
const { store } = this.context;
4
this.unsubscribe = store.subscribe(() =>
5
this.forceUpdate()
6
);
7
}
8
9
render() {
10
const props = this.props;
11
const { store } = this.context;
12
const state = store.getState();
13
// ...
14
}
15
}
16
17
VisibleTodoList.contextTypes = {
18
store: React.PropTypes.object
19
}
Copied!
React-Redux自动生成的容器组件的代码,就类似上面这样,从而拿到store
最近更新 1yr ago
复制链接