javascript - "dispatch"未捕获类型错误 React-Redux

Question

简单的背景知识，我正在使用旧版本的 this 开发 React-Redux 应用程序。锅炉板项目。

但是，它遇到了一些问题，因此我将代码移植到同一样板项目的最新版本(昨天做的)。

这样我之前遇到的问题就解决了。 UI 正在加载，一切看起来都很棒，但是当 Button.onTouchTap() 被触发时，它会抛出如下错误:

Uncaught TypeError this.props.dispatch is not a function

这之前工作正常，没有任何问题，不知道是什么破坏了它。 :(

在我的组件中，我使用装饰器连接到存储，而不是 mapStateToProps 方法(据我所知，这通常是此问题的根源)。

@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 装饰器的第二个参数将要分派(dispatch)到组件的 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

但是，这不应该在现实世界的应用程序中完成，并且应该按照本答案开头所示进行重构。