mapstatetoprops和mapdispatchtoprops之间的区别是什么

Question

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

Answer 1

mapStateToProps是一个用于向组件提供商店数据的函数,而您将使用该函数mapDispatchToProps将操作创建者作为组件的道具提供.

根据文件:

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

将mapDispatchToProps每个动作创建者包装到一个调度调用中以便可以直接调用它们,它们将被合并到组件的props中.

一个简单的例子就是

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