javascript - Thunk Action 主体未被调用

Question

我的 thunk Action 似乎没有贯穿其核心逻辑。我从 componentDidMount 中调用了 thunk Action ，但它不会反过来导致它运行:const response = await findOne(id)。

此外，我认为如果使用 redux-thunk，我不需要明确地将 dispatch 作为 prop 传递给 mapDispatchToProps，我认为我设置 thunk 的方式是 thunk 已经可以使用 dispatch 了吗？我用过类似的其他操作并且效果很好，为什么不用这个呢？

砰砰 Action

export function fetchCompany(id) {
  return async (dispatch) => {

    try {
      const response = await findOne(id)

      if(response && response.body) {
        const company = response.body
        dispatch(companyReceived(company))
      }
    } catch(err) {
      console.log("failed request in authenticate thunk action")
      console.log(`error details: ${err.status} /n ${err}`)
    }
  }
}

容器……

import { fetchCompany } from '../../client/actions/company/CompanyAsyncActions'

class InterviewContainer extends Component {
  async componentDidMount() {
    await fetchCompany(this.props.params.companyId)
  }

  render(){
    return (this.props.company && <Interview className='ft-interview' company={this.props.company} />)
  }
}

const mapStateToProps = state => ({
  company: state.company.company
})

const mapDispatchToProps = {
  fetchCompany: fetchCompany
}

export default connect(mapStateToProps, mapDispatchToProps)(InterviewContainer)

过去，我没有将 (dispatch) 作为 prop 传递给 mapDispatchToProps，它工作正常。但我看到其他人都在这样做。如果我不这样做，我的代码在过去是如何工作的？为什么这一次在上面的示例中不起作用？

看看另一个异步操作 thunk 容器和调用示例，它工作得很好，我在另一个容器中以相同的方式调用它

容器

class HomePageContainer extends Component {
  constructor(){
    super()
  }

  async componentDidMount() {
    await this.props.fetchFeaturedCompanies()
    await this.props.fetchCompanies()
    await this.props.fetchCountries()
  }

  render(){
    return (<HomePage className='ft-homepage'
                      featuredCompanies={this.props.featuredCompanies}
                      countries={this.props.countries}
                      companies={this.props.companies}
    />)
  }
}

const mapStateToProps = state => ({
  countries: state.country.countries,
  companies: state.company.companies,
  featuredCompanies: state.company.featuredCompanies
})

const mapDispatchToProps = {
  fetchCountries: fetchCountries,
  fetchCompanies: fetchCompanies,
  fetchFeaturedCompanies: fetchFeaturedCompanies
}

export default connect(mapStateToProps, mapDispatchToProps)(HomePageContainer)

砰砰 Action

export function fetchCompanies() {
  return async (dispatch, getState) => {
    const response = await find()

    if(response && response.body) {
      const companies = response.body
      dispatch(companiesReceived(companies))
    }
  }
}

Answer 1

在 InterviewContainer 的 componentDidMount 中，您不小心调用了导入的 fetchCompany，而不是 this.props.fetchCompany.