Question

我在一个项目中工作，我们使用redux和redux-thunk（我们使用中间件）。

这是一个100k +的行代码项目，所以我不知道所有内容。

我有一个简单的问题，当我将数据提取到服务器时（在.Net中）我有一个加载程序让用户知道服务器正在运行。

我的.js文件中包含了获取数据的操作：

// Query Count management
export function segmentCount(queryIndex) {
    return function(dispatch) {
        dispatch({ type: ActionTypes.COUNT + '_PENDING', payload: { queryIndex: queryIndex } });
        axios.post(urls.SegmentCount, [queryIndex])
            .then((response) => {
                dispatch({ type: ActionTypes.COUNT + '_FULFILLED', payload: { queryIndex: queryIndex, response: response } });
            })
            .catch((err) => {
                dispatch({ type: ActionTypes.COUNT + '_REJECTED', payload: { queryIndex: queryIndex, response: err } });
            });
    }
}
export function actionCount(queryIndex) {
    return function(dispatch) {
        dispatch({ type: ActionTypes.COUNT + '_PENDING', payload: { queryIndex: queryIndex } });
        axios.post(urls.ActionCount, [queryIndex])
            .then((response) => {
                dispatch({ type: ActionTypes.COUNT + '_FULFILLED', payload: { queryIndex: queryIndex, response: response } });
            })
            .catch((err) => {
                dispatch({ type: ActionTypes.COUNT + '_REJECTED', payload: { queryIndex: queryIndex, response: err } });
            });
    }
}

我称之为函数的jsx：

segmentCount() {
        this.props.dispatch(segmentCount(this.props.queryId));
    }
    actionCount() {
        this.props.dispatch(actionCount(this.props.actionId));
    }

当我们有ActionTypes_PENDING时，加载器通常会出现。

一切正常，我添加了函数actionCount，它正在运行，但我没有加载器，就像使用segmentCount时一样，我拥有它。

我完全不知道在哪里寻求解决这个问题。如果有人知道在哪一个上看，我会非常高兴！如果您需要具体信息，请告诉我。

先感谢社区！

Answer 1

根据我的理解 segmentCount 和 actionCount 以及不同的部分。所以你需要为它使用不同的调度类型。

 dispatch({ type: ActionTypes.SegmentCOUNT + '_PENDING', payload: { queryIndex: queryIndex } });

 dispatch({ type: ActionTypes.ActionCOUNT + '_PENDING', payload: { queryIndex: queryIndex } });

还要添加加载器示例以便更好地理解。

希望以上答案解决了你的问题。

使用React Redux thunk的加载器

1 个答案: