Javascript '；调度'；未捕获类型错误反应重复

一个简单的背景，我正在使用旧版本的boiler plate项目开发React Redux应用程序

但是，它有一些问题，所以我将代码移植到同一个锅炉板项目的最新版本（昨天做了）

所以我之前遇到的问题得到了解决。用户界面正在加载，一切看起来都很好，但是当

按钮.onTouchTap（）

被触发时，它会抛出如下错误：

Uncaught TypeError this.props.dispatch is not a function

这之前工作正常，没有任何问题，不确定是什么原因造成的(

在我的组件中，我使用decorator连接到存储，而不是mapstatetops方法（这通常是这个问题的根源）

将在下面的行中抛出错误：

this.props.dispatch(myAction(this.state.param1, this.state.param2))

---

我完全糊涂了，并且已经被这个问题困扰了很长时间。非常感谢您的帮助，谢谢！通常认为直接访问组件中的分派函数是一种不好的做法。您应该使用

@connect

decorator的第二个参数来将您想要分派的操作映射到您的道具上r组件作为简单回调

此模式使您的组件变得哑巴。它不知道回调来自redux、其父级或您可以使用的任何其他来源。它降低了组件的遵从性，并使测试和维护变得更容易

我从未将

connect

用作装饰器，但我想您可以这样使用它

import { connect } from 'react-redux'
import { myAction } from '/path/to/action/file'

@connect(
  state => ({ param: state.myReducer.myParam }),
  { myAction }
)

const MyComponent = props => {
  const { param, myAction } = props

  return (
    <div>
      <p>{ param }</p>
      <button onClick={ myAction }>Click Me</button>
    </div>
  )
}

export default MyComponent

从'react redux'导入{connect}
将{myAction}从“/path/导入/action/file”
@连接(
state=>（{param:state.myReducer.myParam}），
{myAction}
)
常量MyComponent=props=>{
常量{param，myAction}=props
返回(
{param}

点击我
)
}
导出默认MyComponent

不良做法解决方案 如果您真的想让代码按原样工作，只需连接您的组件并在props中为其提供分派功能

import { connect } from 'react-redux'
import { myAction } from '/path/to/action/file'

@connect(
  state => ({ param: state.myReducer.myParam }),
  dispatch => ({ dispatch }),
)

const MyComponent = props => {
  const { param, dispatch } = props

  return (
    <div>
      <p>{ param }</p>
      <button onClick={ () => dispatch(myAction()) }>Click Me</button>
    </div>
  )
}

export default MyComponent

从'react redux'导入{connect}
将{myAction}从“/path/导入/action/file”
@连接(
state=>（{param:state.myReducer.myParam}），
分派=>（{dispatch}），
)
常量MyComponent=props=>{
const{param，dispatch}=props
返回(
{param}

dispatch（myAction（））}>单击我
)
}
导出默认MyComponent

---

但同样，这不应该在现实世界的应用程序中进行，而应该按照本答案开头所示进行重构。

dispatch

在props中？我不使用MapStateTops或mapDispatchToProps，而是使用@connect（（store）=>{return{param:store.myReducer.myParam}），所以您使用的是MapStateTops:-）您正在将其与连接装饰器一起使用。你能用这部分代码来编辑你的问题吗？我想我有点理解你的意思，你能编辑你的答案来举例说明我是如何做到这一点的吗？我也明白@connect是个坏主意。但我是在学习react redux的同时构建的，在任何地方都很难回头改变它。谢谢！；-）我用decorator更新了这个问题，仅供参考@Emrys Myrooin。我正在尝试你的改变，虽然错误消失了，但它的行为有点奇怪。如果请求抛出401，它可以正常工作，但是如果它抛出200，它就是不响应。我正在调查更多。嘿@EmrysMyrooin，一些新信息。查询被触发，我收到响应，唯一抛出错误的是“this.props.dispatch”方法。我不知道为什么会这样。此外，已调度的action.type未被捕获在减速器中：另外，您必须重构代码，以避免使用

this.props.dispatch

和像我的示例中那样的道具操作！但是如果你不想重构，我已经做了一个更新来纠正错误。

import { connect } from 'react-redux'
import { myAction } from '/path/to/action/file'

@connect(
  state => ({ param: state.myReducer.myParam }),
  dispatch => ({ dispatch }),
)

const MyComponent = props => {
  const { param, dispatch } = props

  return (
    <div>
      <p>{ param }</p>
      <button onClick={ () => dispatch(myAction()) }>Click Me</button>
    </div>
  )
}

export default MyComponent