React Native使用react-redux的connect传入mapDispatchToProps报类型错误如何解决

问题原因与解决方案 #

1. 核心错误：connect调用语法不符合规范 #

react-redux提供的connect高阶函数的传参规则为：

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

函数执行后返回的高阶组件仅接受「要连接的组件」作为唯一入参，你使用的链式调用写法是错误的：

// 错误写法
export default connect(mapStateToProps)(mapDispatchToProps)(MyApp);

你把mapDispatchToProps错当成了第一阶的入参传入，此时返回的不是可执行的高阶组件，而是错误的对象实例，因此触发你看到的TypeError。

修正方法：把mapStateToProps和mapDispatchToProps都作为connect的参数传入第一对括号，第二对括号只传入你的业务组件：

export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

2. 补充修正：action调用逻辑错误 #

就算修正了connect语法，你当前的action调用代码也无法正常触发状态更新：你直接调用了导入的addQuote原始action creator，没有绑定dispatch，不会通知store处理动作。
经过connect连接后，你定义的addQuote方法已经被注入到组件的props中，直接从props取值调用即可：

// 函数组件示例：从props解构出绑定好的addQuote
const MyApp = ({ addQuote }) => {
  // ...其他业务逻辑
  const handleSubmitButton = (val) => addQuote(val);
  
  // 原有视图代码无需修改
  return (
    <TouchableOpacity
      style={styles.submitButton}
      onPress={ () => handleSubmitButton(quoteForm) }
    >
      <Text style={{ color: '#fff' }}>
        SOUMETTRE
      </Text>
    </TouchableOpacity>
  )
}

如果是类组件，调用方式改为this.props.addQuote(val)即可。

可选优化 #

mapDispatchToProps支持更简洁的对象写法，不需要手动包裹dispatch：

// 和你原有写法效果完全一致，更简洁不易出错
const mapDispatchToProps = { addQuote }

内容的提问来源于stack exchange，提问作者user14623448