mapstatetoprops和mapdispatchtoprops之间有什么区别[重复]

问题描述 投票:9回答:3

这个问题在这里已有答案:

mapStateToPropsmapDispatchToProps对反应还原中connect函数的论证有什么区别?任何人都可以用例子给出合适的解释

reactjs redux react-redux
3个回答
21
投票

mapStateToProps是一个用于向组件提供商店数据的函数,而mapDispatchToProps则用于将动作创建者作为组件的道具提供。

根据文件:

如果指定了mapStateToProps参数,则新组件将订阅Redux存储更新。这意味着每次更新商店时,都会调用mapStateToPropsmapStateToProps的结果必须是一个普通的对象,它将被合并到组件的道具中。

使用mapDispatchToProps将每个动作创建者包装到一个调度调用中,这样它们可以被直接调用,将​​被合并到组件的道具中。

一个简单的例子就是

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

function mapDispatchToProps(dispatch) {
  return { addTodo: bindActionCreators(addTodo, dispatch) }
}

export default connect(mapStateToProps, mapDispatchToProps)(Todos);

11
投票

在一个非常简单的术语中,

mapStateToProps:它将redux状态连接到react组件的props。

mapDispatchToProps:它连接redux动作以反应道具。

一个非常轻松的例子:(我希望,你知道我的意思)

// state
const mapStateToProps = state => {
  return { lists: state.lists };
};

// props
const mapDispatchToProps = ({ lists }) => (
  <ul>
    { 
      lists.map(el => (
        <li key={ el.id }>
          { el.heading }
        </li>
      )
    }
  </ul>
);

// Now, connect state to prop
const List = connect(mapStateToProps)(mapDispatchToProps);

1
投票

用非常简单的术语:

当您想从组件中获取全局状态的值时,将调用mapStateToProps

function mapStateToProps(state) {
  return {
    message: state.message

  };
}

全局状态的值仅在动作的帮助下更改。因此,如果要更改全局状态的值,则需要执行操作。 mapDispatchToProps用于绑定组件中的动作。

© www.soinside.com 2019 - 2024. All rights reserved.