mapStateToProps 与 mapDispatchToProps [重复]答案

【问题标题】：mapStateToProps vs mapDispatchToProps [duplicate]mapStateToProps 与 mapDispatchToProps [重复]
【发布时间】：2018-10-04 06:33:33
【问题描述】：

react-redux 中 connect 函数的 mapStateToProps 和 mapDispatchToProps 参数有什么区别？

【问题讨论】：

标签： reactjs redux react-redux mapstatetoprops mapdispatchtoprops

【解决方案1】：

mapStateToProps 是用于向组件提供存储数据的函数，而mapDispatchToProps 是用于将动作创建者作为道具提供给组件的函数。

根据文档：

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

通过 mapDispatchToProps，每个动作创建者都被封装到一个调度中调用所以它们可以被直接调用，将被合并到组件的 props。

一个简单的例子是

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

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

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

【讨论】：

嘿，如果我错了，请纠正我，但我可以在不使用 mapDispatchToProps 的情况下调用我的操作，例如 ***export default connect(mapStateToProps, { getItems, deleteItem })(ShoppingList);**** *，所以这意味着它不是必需的吗？

【解决方案2】：

简单来说，

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

mapDispatchToProps：将 redux 动作连接到 react props。

一个非常简单的例子：（我希望你明白我的意思）

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

【讨论】：

【解决方案3】：

简单来说：

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

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

  };
}

全局状态的值只有在动作的帮助下才会改变。所以如果你想改变全局状态的值，你需要一个动作。 mapDispatchToProps 用于绑定组件中的操作。

【讨论】：

嘿，如果我错了，请纠正我，但我可以在不使用 mapDispatchToProps 的情况下调用我的操作，例如 ***export default connect(mapStateToProps, { getItems, deleteItem })(ShoppingList);**** *，所以这意味着它不是必需的吗？