reactjs - mapDispatchToProps 在react-redux 中如何工作

Question

我观看了有关 Redux 的 Egghead.io 教程，感觉我对 Redux 试图做什么有所了解，但它的实际工作方式对我来说仍然很神秘。我使用react-redux connect方法实现了Dan的简单计数器应用程序，但我并不真正理解我的实现。我尝试过两种可能的方法:

不传递调度:

const mapDispatchToProps = {
  upIt: () => {
    return ({type:'INCREMENT'}
  )
  },
  downIt: () => {
    return({type:'DECREMENT'})
  }
}

传递调度:

const mapDispatchToProps = dispatch => ({
  upIt: () => {
    dispatch({type:'INCREMENT'}
  )
  },
  downIt: () => {
    dispatch({type:'DECREMENT'})
  }
})

计数器使用这两个选项之一来工作，但我不确定第一个选项(我从不调用“dispatch”)如何设法连接到 store.dispatch 方法。有什么理由让我更喜欢一种编写方法的方式而不是另一种？

Answer 1

将 mapDispatchToProps 视为传递相关 action creators 的接口(interface)到您的组件(这些 Action 创建者出现在您的组件上，并在您的组件中作为 Prop 进行访问)。

Action 创建者与 Action 不同。

在 Redux 中，action 只是一个简单的 JavaScript 对象，如下所示(它可以具有您想要的任何属性，但必须包含 type 属性):

{ type: 'INCREMENT' }

这些操作被发送到reducer，它处理如何根据操作属性更新状态。

Action 创建者是一个函数，在调用时将这些 Action 发送到 reducer 。

因此，在您的示例中，upIt 和 downIt 是操作创建者，而 {type:'INCRMENT'} 和 {type:'DECRMENT'} 是操作。

以upIt为例:

upIt: () => {
    return ( {type:'INCREMENT'} )
}

react-redux 中的 connect() 函数将拦截从此 action 创建者 函数返回的 action ，并将其分派(dispatch)到 redux 存储(然后由 reducer 处理)。

connect函数实现:

connect(mapStateToProps, mapDispatchToProps)(ComponentName)

但是，请考虑您可能希望从单个操作创建者分派(dispatch)多个操作的情况。当函数只能返回一次值时，这怎么可能？

这就是 mapDispatchToProps 的 dispatch 参数发挥作用的地方!它允许您从单个操作创建者分派(dispatch)多个操作。

例如，假设您想在 UI 中创建一个按钮来递增计数器，然后 5 秒后再次递减计数器。在 mapDispatchToProps 中定义的 action 创建者 可能如下所示:

const mapDispatchToProps = dispatch => ({
    incrementForFiveSeconds: () => {
        dispatch( {type:'INCREMENT'} );
        setTimeout(() => { 
            dispatch( {type:'DECREMENT'} );
        }, 5000);
    },
    // other action creators
})

注意我们如何在同一个 Action 创建器中调用 dispatch 函数两次!

总结一下:

1. 如果您的操作创建者仅分派(dispatch)一个单个操作，那么您可以使用return或dispatch() 接口(interface)。
2. 如果您的 Action 创建者可能需要调度多个 Action 创建者，那么您将需要使用dispatch() 接口(interface)。