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。

以前

mapDispatchToProps

下一个 - 🕹️框架

React Hooks

最近更新 1yr ago

复制链接