使用 React Redux thunk 的加载器

Question

我在一个项目中使用 react with 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 的加载器

Loader using React Redux thunk

dispatch

reactjs

redux

redux-thunk