Redux

React中使用Redux

Redux系列文章中我们详细介绍了Redux的设计与使用,React Redux是官方提供的ReduxReact的绑定库,用于将Redux中的StateAction Creators映射到React组件的Props。本组件的设计思想可以查看Presentational and Container Components,即将展示组件与容器组件分离,将展示组件尽可能地作为Stateless对待。在应用中,只有最顶层组件是对Redux可知(例如路由处理)这是很好的。所有它们的子组件都应该是“笨拙”的,并且是通过props获取数据。

容器组件 展示组件
位置 最顶层,路由处理 中间和子组件
使用Redux
读取数据 Redux获取state props获取数据
修改数据 Redux发起actions props调用回调函数

组件数据流

React Redux 数据流

我们用react-redux提供的connect()方法将“笨拙”的Counter转化成容器组件。connect()允许你从Redux store中指定准确的state到你想要获取的组件中。这让你能获取到任何级别颗粒度的数据。首先来看下一个简单的Counter的示例:

export default class Counter extends Component {
  render() {
    return <button onClick={this.props.onIncrement}>{this.props.value}</button>;
  }
}
// 哪些 Redux 全局的 state 是我们组件想要通过 props 获取的?
function mapStateToProps(state) {
  return {
    value: state.counter,
  };
}

// 哪些 action 创建函数是我们想要通过 props 获取的?
function mapDispatchToProps(dispatch) {
  return {
    onIncrement: () => dispatch(increment()),
  };
}

/**或者也可以使用bindActionCreators
//将Dispatch映射为Props
...
import * as CounterActions from "../actions/counter";
...
function mapDispatchToProps(dispatch) {
    return bindActionCreators(CounterActions, dispatch)
}
**/

// 你可以传递一个对象,而不是定义一个 `mapDispatchToProps`:
// export default connect(mapStateToProps, CounterActionCreators)(Counter);

// 或者如果你想省略 `mapDispatchToProps`,你可以通过传递一个 `dispatch` 作为一个 props:
// export default connect(mapStateToProps)(Counter);

let App = connect(mapStateToProps, mapDispatchToProps)(Counter);
const targetEl = document.getElementById("root");
const store = configureStore({ counter: 0 }); //初始化Store

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  targetEl
);

总结而言,各个部分的作用如下:

React Redux 组件功能

Provider & Store

<Provider store> 使组件层级中的connect()方法都能够获得Redux store。正常情况下,你的根组件应该嵌套在 <Provider> 中才能使用connect()方法。如果你真的不想把根组件嵌套在 <Provider>中,你可以把store作为props传递到每一个被connet()包装的组件,但是我们只推荐您在单元测试中对store进行伪造(stub)或者在非完全基于React的代码中才这样做。正常情况下,你应该使用 <Provider>。 属性

  • store (Redux Store):应用程序中唯一的Redux store对象
  • children (ReactElement)组件层级的根组件。

connect:连接React组件与Redux store

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]);

连接操作不会改变原来的组件类,反而返回一个新的已与Redux store连接的组件类。

mapStateToProps

mapStateToProps(state, [ownProps]): stateProps:如果定义该参数,组件将会监听Redux store的变化。任何时候,只要Redux store发生改变,mapStateToProps函数就会被调用。该回调函数必须返回一个纯对象,这个对象会与组件的props合并。如果你省略了这个参数,你的组件将不会监听Redux store。如果指定了该回调函数中的第二个参数ownProps,则该参数的值为传递到组件的props,而且只要组件接收到新的propsmapStateToProps也会被调用。

mapDispatchToProps

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):如果传递的是一个对象,那么每个定义在该对象的函数都将被当作Redux action creator,而且这个对象会与Redux store绑定在一起,其中所定义的方法名将作为属性名,合并到组件的props中。如果传递的是一个函数,该函数将接收一个dispatch函数,然后由你来决定如何返回一个对象,这个对象通过dispatch函数与action creator以某种方式绑定在一起(提示:你也许会用到Redux的辅助函数bindActionCreators())。如果你省略这个mapDispatchToProps参数,默认情况下,dispatch会注入到你的组件props中。如果指定了该回调函数中第二个参数ownProps,该参数的值为传递到组件的props,而且只要组件接收到新propsmapDispatchToProps也会被调用。

mergeProps

mergeProps(stateProps, dispatchProps, ownProps): props:如果指定了这个参数,mapStateToProps()mapDispatchToProps()的执行结果和组件自身的props将传入到这个回调函数中。该回调函数返回的对象将作为props传递到被包装的组件中。你也许可以用这个回调函数,根据组件的props来筛选部分的state数据,或者把props中的某个特定变量与action creator绑定在一起。如果你省略这个参数,默认情况下返回Object.assign({}, ownProps, stateProps, dispatchProps)的结果。

options

options 如果指定这个参数,可以定制connector的行为。

  • pure = true:如果为trueconnector将执行shouldComponentUpdate并且浅对比mergeProps的结果,避免不必要的更新,前提是当前组件是一个“纯”组件,它不依赖于任何的输入或state而只依赖于propsRedux storestate。默认值为true
  • withRef = false:如果为trueconnector会保存一个对被包装组件实例的引用,该引用通过getWrappedInstance()方法获得。默认值为false

Links