'dispatch'未捕获的TypeError React-Redux

Question

简要介绍一下，我正在使用此样板项目的较旧版本开发React-Redux应用程序。

但是，它存在一些问题，因此我将代码移植到同一样板项目的最新版本中（昨天完成）。

因此，我之前遇到的问题已得到解决。 UI正在加载，一切看起来都很不错，但是当Button.onTouchTap()被触发时，它会引发如下错误：

Uncaught TypeError this.props.dispatch is not a function

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

在我的组件中，我使用装饰器连接到商店，而不是mapStateToProps方法（通常是此问题afaik的根源）。

@connect((store) => {
  return {
    param1 : store.myReducer.param1,
    param2 : store.myReducer.param2,
    param3 : store.myReducer.param3,
    param4 : store.myReducer.param4,
  }
})

错误被抛出以下行：

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

我很困惑，已经被这个问题困扰了很长时间了。 任何帮助表示赞赏，谢谢！ <3

Answer 1

通常，直接授予对组件中分派功能的访问权限的做法通常被认为是不良做法。 相反，您应该使用@connect装饰器的第二个参数将要调度的操作作为简单的回调映射到组件的props。

这种模式会使您的组件变得笨拙。 它不知道该回调来自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

不良做法解决方案

如果您真的希望您的代码能够正常工作，那么请连接您的组件，并在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

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