容器组件和展示组件react-redux

react-redux

react-redux的作用是连接（connect）store和容器组件的。store是redux提供的，容器组件是react提供的。

5.1 组织应用的组件

• 组织应用的组件

  • 容器组件

  • 展示组件

容器组件：位于应用最顶层的组件，用来与redux连接的。从redux中获取数据作为props。展示组件：位于应用的中间或者子组件，是纯粹的组件，与redux没有关系。他们从自己的父组件获取数据作为props，他们的共同根组件是应用的唯一的容器组件。展示组件可以维持少量的自身状态信息。

5.2 连接Store与组件

react-redux仅仅提供两个关键模块：Provider和connect。

源码：

import Provider from './components/Provider'
import connect from './components/connect'

export { Provider, connect }

• Provider：是一个组件，接受一个store属性和一个子组件（也就是上面说到的：store是redux提供的，容器组件是是react提供的。）

例子：

ReactDOM.render(
    <Provider store={store}>
      {/* note "routerState" here: important to pass it down */}
      <Handler routerState={routerState} />
    </Provider>,
    document.getElementById('root')
  );

• connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])：connect返回一个函数，它接受一个React组件的构造函数作为连接对象，最终返回连接好的组件构造函数。

例子：

import * as actionCreators from './actionCreators'

function mapStateToProps(state) {
  return { todos: state.todos }
}

export default connect(mapStateToProps, actionCreators)(MyRootComponent)

参考：

• redux中文文档

• react-redux项目