Question

反应redux中mapStateToProps 和 mapDispatchToProps 参数对connect函数的区别是什么？任何人都可以用例子给出合适的解释

Answer 1

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

根据文件：

如果指定了 mapStateToProps 参数，则新组件将会   订阅Redux商店更新。这意味着任何时候商店   更新后，将调用mapStateToProps。结果   mapStateToProps必须是一个普通的对象，它将被合并到一起   组件的道具。

将 mapDispatchToProps 每个动作创建者都包含在一个调度中   调用所以他们可以直接调用，将合并到   组件的道具。

一个简单的例子是

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

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

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

Answer 2

用一个非常简单的术语来说，

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);

Answer 3

用非常简单的术语来说：

当您想从组件中获取全局状态的值时，会调用

mapStateToProps

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

  };
}

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

mapstatetoprops和mapdispatchtoprops之间的区别是什么？

3 个答案: