mapStateToProps对mapDispatchToProps

Question

mapStateToProps和mapDispatchToProps参数在react redux中对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状态与反应组件的支柱连接起来。

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用于绑定组件中的操作。