Question

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

然而，它在未来遇到了一些问题，所以我将我的代码移植到同一锅炉板项目的最新版本（昨天做了）。

所以我之前遇到的问题得到了解决。用户界面正在加载，一切看起来都很棒，但当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))

我很困惑，很长一段时间都被抓住了。任何帮助表示赞赏，谢谢！＆LT; 3

Answer 1

通常认为直接访问组件中的调度功能是一种不好的做法。您应该使用@connect装饰器的第二个参数将要调度的操作映射到组件的道具，作为简单的回调。

此模式会使您的组件变得愚蠢。它并不知道回调来自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

糟糕的练习解决方案

如果你真的希望你的代码工作正常，那就是juste连接你的组件并在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

但同样，这不应该在现实世界的应用程序中完成，并且应该在本答案的开头显示重构。

＆＃39;派遣＆＃39;未捕获的TypeError React-Redux

1 个答案:

糟糕的练习解决方案