Thunk 不会从子组件调度



我不经常发帖,但我已经搜索了一整天,这个让我很困惑。

我有一个Redux连接的组件"主页",它被React Router作为索引加载。

在"主页"中,我有一个子组件"EventCreate",它连接到同一个Redux商店。

然后我有一个Thunk,它使用Async 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和SUCCESS或ERROR操作。

这就是我被卡住的地方。。。

它在"主页>"中运行良好,但在"EventCreate"中不起作用。它启动了行动,但它不做任何"雷神"内部的事情。没有任何错误,只是出于某种原因跳过了那个部分。

如果它是相关的,我将两者都连接到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'

如有任何帮助,我们将不胜感激。

指定调度修复了它。不确定确切原因。

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

}

最新更新