React-Redux

Redux的作者友情赞助,封装了一个 React 专用的库 React-Redux,为 React + Redux 提供了一种更科学的代码组织方式。

本人认为React-Redux的中心思想就是实现ModelView的分离。它将所有组件分成两大类:

  • UI组件(View层)

    • 只负责 UI 的呈现,不带有任何业务逻辑
    • 没有状态(即不使用this.state这个变量)
    • 所有数据都由参数(this.props)提供
    • 不使用任何 Redux 的 API
  • 容器组件(Model层)

    • 负责管理数据和业务逻辑,不负责 UI 的呈现
    • 带有内部状态
    • 使用 Redux 的 API

这样以来也实现了Redux和React分离,UI组件只要书写react的代码,容器组件只负责书写redux相关操作,易于书写与维护。

react-redux主要提供了倆个关键API:Provider组件 和 connect函数。

connect()

connect函数的主要功能是连接 UI组件 与 容器组件。它会自动为您的UI组件生成一个容器组件,并且创立起它们之间的通信。

1
2
3
4
const ContainerComponent = connect(
mapStateToProps,
mapDispatchToProps
)(UIComponent);

上面代码中,UIComponent是 UI组件,containerComponent就是由 React-Redux 通过connect方法自动生成的容器组件。而 mapStateToPropsmapDispatchToProps 则建立起了倆种组件之间的通信机制。

mapStateToProps(可选参数)

mapStateToProps(state,[ownProps])

  • state: state数据
  • ownProps: 可选参数,容器组件的props对象,使用ownProps作为参数后,如果容器组件的参数发生变化,也会引发 UI 组件重新渲染。

这个函数的主要功能是将state通过props属性传递给UI组件,它会订阅 Store,每当state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染。

mapStateToProps函数返回一个对象,这个对象中的每一个键值对都会映射到UI组件的props上。

1
2
3
4
5
const mapStateToProps = (state) => {
return {
data: state
}
}

上面的 mapStateToProps 函数将state传递给了UI组件的props属性,您可以在UI组件内通过this.props.data来访问state。这样就实现了容器组件向UI组件方向上的数据传递。

mapDispatchToProps(可选参数)

mapDispatchToProps可以是一个函数,也可以是一个对象。

作为函数,mapDispatchToProps 会得到 dispatchownProps 俩个参数,并且返回一个对象。

1
2
3
4
5
6
7
8
9
10
const mapDispatchToProps = (
dispatch,
ownProps
) => {
return {
click: () => {
// 可以进行dispatch操作,发出action
}
};
}

上面的mapDispatchToProps函数会返回一个对象,这个对象的键值依旧会传递给UI组件的props,在UI组件内部,您可以通过this.props.click来调用这个函数。

Provider 组件

Provider 组件主要作为整个应用的容器,用来传递store给connct所生成的容器组件。

1
2
3
<Provider store={store}>
<ContainerComponent />
</Provider>

上面代码中,Provider在根组件外面包了一层,这样一来,App的所有子组件就默认都可以拿到state了。

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Provider extends Component {
getChildContext() {
return {
store: this.props.store
};
}
render() {
return this.props.children;
}
}
Provider.childContextTypes = {
store: React.PropTypes.object
}

解释上面的代码之前先解释下 context 和 contextTypes,

  • context:同state、props一样都是 React 的数据载体,但它可以实现组件间跨级传递数据
  • contextTypes: 在组件上指定后指定该属性后,方可访问该组件context的属性
  • getChildContext: 在需要向下传递数据的父组件中使用,用于指定传递的数据,
  • childContextTypes: 在组件上指定后指定该属性后,方可传递该组件context的属性

也就是说:指定数据并要将数据传递下去的父组件要定义 childContextTypes 和 getChildContext() ;想要接收到数据的子组件 必须定义 contextTypes 来使用传递过来的 context 。

所以,上面代码的意思就是:Provider组件通过getChildContext方法指定向下传递的数据为store,并通过childContextType属性使该属性得以传递。Provider的子组件可以通过this.context取到数据。