使用 React Redux thunk 的加载器答案

【问题标题】：Loader using React Redux thunk使用 React Redux thunk 的加载器
【发布时间】：2018-10-10 15:09:34
【问题描述】：

我在一个项目中使用 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时，我有它。

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

提前感谢社区！

【问题讨论】：

标签： reactjs redux redux-thunk dispatch

【解决方案1】：

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

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

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

还可以添加加载器示例以加深理解。

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

【讨论】：

没有说，但我在文件中还有另一个使用 COUNT 的函数。它将所有信息发送到减速器。我不需要将它发送到不同的调度，因为如果我计算段或动作，函数与相同的答案完全相同。只是考虑不同的论点来进行数学运算。
好的，所以请添加加载器代码以了解更多信息。
我找到了解决办法，加载器是从reducer调用的。要再次使用它，我在我的组件中使用了一个 queryFetching 变量。如果 var 为真，我让加载器出现，并使用 reducer 修改它。
@RaphaelABADIE-MOREAU 很好，如果我的回答对你有帮助，请投票。