Question

我不常发帖，但我整天都在搜索，这让我感到困惑。

我有一个Redux连接的组件“主页”，由React Router作为索引加载。

在“主页”中，我有子组件“ EventCreate”，该子组件连接到同一Redux存储。

然后我有了一个Thunk，它使用异步Axios查询GraphQL端点。

当我在“首页”组件中添加thunk时，就这样称呼它...

componentDidMount() {
   const { getEvent } = this.props
   const db_query = `query {
          allEvent {
            data {
              slug
              }}}`
   getEvent(db_query)
 }

这是我正在调用的主要Actions文件中的Thunk。

export function getEvent(db_query) {
   return dispatch => {
      console.log(db_query)
      dispatch(getEventBegin());
      return axios({
      url: '<GRAPHQL ENDPOINT>',
      method: 'post',
      headers: { "Authorization" : <KEY> },
      data: {
        query: db_query
      }
    }).then((result) => {
      console.log("Query Result:")
      console.log(result)
      dispatch(getEventSuccess(result));
    }).catch(error => { dispatch(getEventFailure(error)); } );
  };
}

如您所见，它称为START and SUCCESS或ERROR操作。

在这里我被困住了...

它可以在“主页>”中正常运行，但在“ EventCreate”中不起作用。它会触发动作，但不会执行Thunk派发中的任何操作。没有错误或任何东西，只是出于某种原因跳过了那部分。

如果有必要，我可以像这样将它们都连接到Redux ...

const mapDispatchToProps = {
  getEvent
}

export default compose(connect(mapStateToProps, mapDispatchToProps))(HomePage)

然后在我的子组件中...

const mapDispatchToProps = {
  getEvent
}

export default compose(connect(mapStateToProps, mapDispatchToProps))(EventCreate)

动作本身的导入方式类似于...

import { getEvent } from '../actions'

任何帮助都会得到SOOOOO的赞赏。

Answer 1

指定分发将其修复。不确定为什么。

const mapDispatchToProps = (dispatch) => {
return {
  getEvent: (dbQuery) => dispatch(getEvent(dbQuery))
}

}

Thunk不会从子组件中分派

1 个答案: