什么是mapDispatchToProps？
我正在阅读Redux库的文档，它有这个例子，
除了读取状态之外，容器组件还可以调度动作。 以类似的方式，您可以定义一个名为
mapDispatchToProps()的函数来接收dispatch（）方法，并返回要注入到表示组件中的callback支持。
这实际上没有意义。 当你已经有mapStateToProps时候，为什么你需要mapStateToProps ？
他们还提供了这个方便的代码示例：
const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } }
有人能请外行解释这个function是什么，为什么它有用吗？
我觉得没有任何答案已经mapDispatchToProps为什么mapDispatchToProps是有用的。
这实际上只能在container-component模式的背景下才能得到解答，我通过一读来最好地理解这一点：
https://medium.com/@learnreact/container-components-c0e67432e005#.1a9j3w1jl
然后
http://redux.js.org/docs/basics/UsageWithReact.html
简而言之，你的components应该只关心显示内容。 他们应该得到信息的唯一地方就是他们的道具 。
从这里分离出来的是关于：
- 你如何获得展示的东西，
- 以及你如何处理事件。
这是containers的用途。
因此，模式中“精心devise”的component如下所示：
class FancyAlerter extends Component { sendAlert = () => { this.props.sendTheAlert() } render() { <div> <h1>Today's Fancy Alert is {this.props.fancyInfo}</h1> <Button onClick={sendAlert}/> </div> }}
看看这个组件如何从props（它通过mapStateToProps从redux存储库中mapStateToProps ）获取它所显示的信息，并从它的道具sendTheAlert()获取它的动作函数。
这就是mapDispatchToProps进来的地方：在相应的container
FancyButtonContainer.js
function mapDispatchToProps(dispatch) { return({ sendTheAlert: () => {dispatch(ALERT_ACTION)} }) } function mapStateToProps(state} { return({fancyInfo: "Fancy this:" + state.currentFunnyString}) } export const FancyButtonContainer = connect( mapStateToProps, mapDispatchToProps)( FancyAlerter )
我想知道你是否可以看到，现在是知道关于重新分配和存储以及状态和…东西的container [1]。
模式中的component FancyAlerter ，不需要知道任何东西：它可以通过它的道具来调用button的onClick方法。
而… mapDispatchToProps是redux提供的有用的方法，让容器可以轻松地将该函数传递到其道具上的包装组件。
所有这些看起来都非常像文档中的待办事例，在这里也有另一个答案，但是我试图根据模式强调原因 。
（注意：您无法将mapStateToProps用于与mapStateToProps相同的目的，因为您无法访问mapStateToProp内部的mapStateToProp ，因此无法使用mapStateToProps为包装组件提供使用dispatch的方法。
我不知道他们为什么select将它分解为两个映射函数 – 使mapToProps(state, dispatch, props) IE可以同时执行两个函数可能更加整洁！
[1]请注意，我故意明确命名容器FancyButtonContainer ，强调它是一个“事物” – 容器的身份（因此存在！）作为“事物”在速记中有时会丢失
export default connect(...)
在大多数例子中显示的语法
这基本上是一个速记。 所以不必写：
this.props.dispatch(toggleTodo(id));
您可以使用mapDispatchToProps，如示例代码所示，然后在别处写入：
this.props.onTodoClick(id);
或者更有可能在这种情况下，你会有这样的事件处理程序：
<MyComponent onClick={this.props.onTodoClick} />
Dan Abramov在这里有一个有用的video： https : //egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist
mapStateToProps（）是一个帮助你的组件获得更新状态的实用工具（由其他组件更新），
mapDispatchToProps（）是一个实用工具，它将帮助你的组件激发一个动作事件（调度动作可能导致应用程序状态的改变）
mapStateToProps，mapDispatchToProps和react-redux库连接提供了一种便捷的方式来访问您的商店的状态和调度function。 所以基本上连接是一个更高阶的组件，如果这对你有意义，你也可以作为包装的东西。 所以每当你的状态改变时，mapStateToProps将会被你的新状态调用，随后你的道具更新组件将会运行render函数来在浏览器中渲染你的组件。 mapDispatchToProps还将键值存储在组件的道具上，通常它们采用某种forms的函数。 通过这种方式，您可以触发组件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无状态函数和高阶组件
mstp接收state和props并允许你从状态中提取道具传给组件。
mdtp接收dispatch和props ，意思是让你绑定动作创build者来调度，所以当你执行结果函数时，动作就会被调用。
我发现这样做只会让你不必在组件中执行dispatch(actionCreator()) ，从而使它更容易阅读。
https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments
