'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

但是同樣，這不應在現實世界的應用程序中完成，而應如本答案開頭所示進行重構。