码迷,mamicode.com
首页 > 其他好文 > 详细

React-redux mapStateToProps,mapDispatchToProps 如何使用

时间:2018-10-22 20:23:33      阅读:382      评论:0      收藏:0      [点我收藏+]

标签:最佳实践   prope   参数   是你   options   rop   使用   render   javascrip   

 

使用 react-redux
首先在最外层容器中,把所有内容包裹在 Provider 组件中,将之前创建的 store 作为 prop 传给 Provider 。

const App = () => {
  return (
    <Provider store={store}>
      <Comp/>
    </Provider>
  )
};
Provider 内的任何一个组件(比如这里的 Comp ),如果需要使用 state 中的数据,就必须是「被 connect 过的」组件——使用 connect 方法对「你编写的组件( MyComp )」进行包装后的产物。

class MyComp extends Component {
  // content...
}

const Comp = connect(...args)(MyComp);
可见, connect 方法是重中之重。

connect 详解
究竟 connect 方法到底做了什么,我们来一探究竟。

首先看下函数的签名:

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

connect() 接收四个参数,它们分别是 mapStateToProps , mapDispatchToProps , mergeProps 和 options 。

mapStateToProps(state, ownProps) : stateProps
这个函数允许我们将 store 中的数据作为 props 绑定到组件上。

const mapStateToProps = (state) => {
  return {
    count: state.count
  }
}
这个函数的第一个参数就是 Redux 的 store ,我们从中摘取了 count 属性。因为返回了具有 count 属性的对象,所以 MyComp 会有名为 count 的 props 字段。

class MyComp extends Component {
  render(){
    return <div>计数:{this.props.count}次</div>
  }
}

const Comp = connect(...args)(MyComp);
当然,你不必将 state 中的数据原封不动地传入组件,可以根据 state 中的数据,动态地输出组件需要的(最小)属性。

const mapStateToProps = (state) => {
  return {
    greaterThanFive: state.count > 5
  }
}
函数的第二个参数 ownProps ,是 MyComp 自己的 props 。有的时候, ownProps 也会对其产生影响。比如,当你在 store 中维护了一个用户列表,而你的组件 MyComp 只关心一个用户(通过 props 中的 userId 体现)。

const mapStateToProps = (state, ownProps) => {
  // state 是 {userList: [{id: 0, name: ‘王二‘}]}
  return {
    user: _.find(state.userList, {id: ownProps.userId})
  }
}

class MyComp extends Component {
  
  static PropTypes = {
    userId: PropTypes.string.isRequired,
    user: PropTypes.object
  };
  
  render(){
    return <div>用户名:{this.props.user.name}</div>
  }
}

const Comp = connect(mapStateToProps)(MyComp);
当 state 变化,或者 ownProps 变化的时候, mapStateToProps 都会被调用,计算出一个新的 stateProps ,(在与 ownProps merge 后)更新给 MyComp 。

这就是将 Redux store 中的数据连接到组件的基本方式。

mapDispatchToProps(dispatch, ownProps): dispatchProps
connect 的第二个参数是 mapDispatchToProps ,它的功能是,将 action 作为 props 绑定到 MyComp 上。

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}

class MyComp extends Component {
  render(){
    const {count, increase, decrease} = this.props;
    return (<div>
      <div>计数:{this.props.count}次</div>
      <button onClick={increase}>增加</button>
      <button onClick={decrease}>减少</button>
    </div>)
  }
}

const Comp = connect(mapStateToProps, mapDispatchToProps)(MyComp);
由于 mapDispatchToProps 方法返回了具有 increase 属性和 decrease 属性的对象,这两个属性也会成为 MyComp 的 props 。

如上所示,调用 actions.increase() 只能得到一个 action 对象 {type:‘INCREASE‘} ,要触发这个 action 必须在 store 上调用 dispatch 方法。 diapatch 正是 mapDispatchToProps 的第一个参数。但是,为了不让 MyComp 组件感知到 dispatch 的存在,我们需要将 increase 和 decrease 两个函数包装一下,使之成为直接可被调用的函数(即,调用该方法就会触发 dispatch )。

Redux 本身提供了 bindActionCreators 函数,来将 action 包装成直接可被调用的函数。

import {bindActionCreators} from ‘redux‘;

const mapDispatchToProps = (dispatch, ownProps) => {
  return bindActionCreators({
    increase: action.increase,
    decrease: action.decrease
  });
}
同样,当 ownProps 变化的时候,该函数也会被调用,生成一个新的 dispatchProps ,(在与 statePrope 和 ownProps merge 后)更新给 MyComp 。注意, action 的变化不会引起上述过程,默认 action 在组件的生命周期中是固定的。

[mergeProps(stateProps, dispatchProps, ownProps): props]
之前说过,不管是 stateProps 还是 dispatchProps ,都需要和 ownProps merge 之后才会被赋给 MyComp 。 connect 的第三个参数就是用来做这件事。通常情况下,你可以不传这个参数, connect 就会使用 Object.assign 替代该方法。

其他
最后还有一个 options 选项,比较简单,基本上也不大会用到(尤其是你遵循了其他的一些 React 的「最佳实践」的时候),本文就略过了。希望了解的同学可以直接看文档。

  

转载自:https://www.tuicool.com/articles/MrmYN36

React-redux mapStateToProps,mapDispatchToProps 如何使用

标签:最佳实践   prope   参数   是你   options   rop   使用   render   javascrip   

原文地址:https://www.cnblogs.com/orzzt/p/9831343.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!