使用 RTK Query 实现轮询

介绍

加入 React × Redux × (RTK Query) 开发团队已经 10 个月了。
我遇到了一种情况，我想从屏幕执行作业并在该屏幕上执行作业后显示状态。
虽然是少见且常见的场景，但使用 WebSocket 太夸张了，所以我决定通过定期轮询的方式来处理。

我做了一个快速的谷歌搜索，但我找不到任何好的或有用的文章，所以我最终在 RTK Query 中寻找一个轮询选项并找到了它。（让我们从一开始就检查官方。）

细节是Redux Toolkit 官方投票页面请参见
这是一个提醒和介绍，您只需像这样将选项传递给通常的 RTK Query 即可轻松完成。

结论

让我们用useQuery 指定pollingInterval 选项。

实施细节

一是API端的实现。
与普通 RTK Query 相同，具体请看官方。
如果您一开始不熟悉使用 RTK Query，那么快速浏览一下这篇文章会让您有所了解。

API端

export const jobApi = createApi({
    reducerPath: 'jobApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com/api/' }),
    tagTypes: ['Job'],
    endpoints: (build) => {
        readLatestJob: build.query<{item: Job}, void>({
            query: () => {
              return 'job/latest';
            }
        })
    }
})

将创建的 api 注册到 store。
由于这种写法也是固定形式，所以省略了细节。

店面

import {jobApi} from 'api'

export const store = configureStore({
    reducer: {
        [jpbApi.reducerPath]: jobApi.reducer
    },
    middleware: (getDefaulktMiddleware) => {
        return getDefaultMiddleware().concat(jobApi.middleware)
    }
})

在用户端，它被称为ifxJobApi.useReadLatestJobQuery。
如果你对 RTK 查询不熟悉 useReadLatestJobQuery 它是从哪里来的？但是，它是use[endpoints で指定した名前]Query 的形式。
第一个参数指定查询中使用的参数，但如果您不需要向端点传递参数，则可以传递undefined。
如果您在第二个参数的可选对象中指定pollingInterval，它将被轮询。

用户端

import {jobApi} from 'api'
  const { data } = jobApi.useReadLatestJobQuery(undefined, { pollingInterval: 5000});

在最后

RTK Query 功能丰富，在 api 用户端可以非常简单地编写。
即使我是 React 新手，如果我遵循固定的写作风格，我也可以实现我想做的事情，所以我每天都享受开发。

RTK Query 的文章还很少，如果以后有更多的话我会很高兴的。

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308628419.html