1

我是 RTK 查询的新手，我喜欢使用 RTK 查询。

在我的项目中，我想添加一个通用加载器，如果有任何请求正在运行，则显示页面加载器，一旦响应返回成功或失败，我想隐藏加载器。

如果有人对此有更多背景信息，请告诉我。

提前致谢。

4

2 回答 2

3

现在，没有任何类似的东西是开箱即用的——但当然，数据在 Redux 存储中都是可用的。

所以你可能可以做类似的事情（伪代码，如果我有所有的数据结构，请检查 devtools，我现在无法查找）

const isAnythingLoading = useSelector(state => Object.values(state.api.queries).some(entry => entry.status == 'loading'))
于 2021-10-05T09:00:05.127 回答
2

在我的应用程序中，我创建了一个中间件，灵感来自RTK 查询文档中的错误处理示例：

const isSilentAction = isAsyncThunkAction(silentAction1, silentAction2, /* other silent actions */);

export const genericLoaderMiddleware = (store) => (next) => (action) => {
    if (!isSilentAction(action)) {
        if (isPending(action)) {
            store.dispatch(/* show loader action */);
        }
        if (isFulfilled(action) || isRejected(action) || isRejectedWithValue(action)) {
            store.dispatch(/* hide loader action */);
        }
    }

    return next(action);
};

它isSilentAction基于isAsyncThunkAction macthing 实用程序，该实用程序过滤掉由中间件处理的createAsyncThunk（如silentAction1，silentAction2...等）创建的操作，以便在某些情况下不显示加载程序。

在store.js自定义中间件中应该注册：

export const store = configureStore({
    /*** code omitted for brevity ***/
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware()
            /*** other middleware ***/
            .concat(genericLoaderMiddleware)
});
于 2021-10-08T07:09:35.310 回答