mapStateToProps接收state和，props并允许您从状态中提取道具以传递给组件。

mapDispatchToProps接收dispatch和props，用于绑定操作创建者以进行分派，因此当您执行结果函数时，将分派操作。

我发现这仅使您不必dispatch(actionCreator())在组件中执行操作，从而使其更易于阅读。

https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments

基本上是简写。因此，不必写：

this.props.dispatch(toggleTodo(id));

您将使用示例代码中所示的mapDispatchToProps，然后在其他地方编写：

this.props.onTodoClick(id);

或更可能是这种情况，您可以将其用作事件处理程序：

<MyComponent onClick={this.props.onTodoClick} />

丹·阿布拉莫夫（Dan Abramov）在此提供了一个有用的视频：https : //egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

mapStateToProps，mapDispatchToProps并且connect来自react-redux库提供了一种方便的方式来访问您的商店state和dispatch商店功能。因此，基本上connect是一个更高阶的组件，如果您认为合适的话，也可以将其视为包装器。因此，每次state更改mapStateToProps时，新组件都会调用您的组件，state随后在props更新组件时，组件将运行render函数以在浏览器中呈现组件。mapDispatchToProps还将键值存储在props组件的上，通常它们采用函数形式。通过这种方式，您可以触发state来自组件onClick，onChange事件的更改。

从文档：

const TodoListComponent = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

const TodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList) 

还要确保您熟悉React无状态函数和高阶组件

mapStateToProps()是一个实用程序，可以帮助您的组件获取更新的状态（由其他一些组件更新），
mapDispatchToProps()是一个实用程序，可以帮助您的组件触发操作事件（调度操作，这可能会导致应用程序状态发生变化）