reactjs - mapStateToProps 与 mapDispatchToProps

Question

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

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

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