在函数内部使用 RTK-Query 挂钩的方法？

Question

我已经使用 Axios 成功编写了我的应用程序来获取内容。截至目前，它已设置为在某些事件发生时获取内容（例如提交按钮已被单击。）但是，我正在试验 Redux 的 RTK-Query 解决方案。这个包生成挂钩，在它们的 examples 中，它们提供了简单的组件级示例，这些示例在挂载时调用挂钩。

我如何利用这些 rtk-hook（以及一般的 hook）以便将它们与 onClick、onSubmit 和条件事件等行为联系起来？ 我知道这与 rules-of-hooks 准则冲突，但我无法想象 RTK-Query 会如此有限，以至于只允许组件级 onMount API 调用。

some related articles I'm reading while I try to figure this out / wait for a helpful example:

第二篇文章似乎有点相关，但我觉得它离题太远了，我怀疑它是否值得安装 rtk-query。我还不如只使用 axios 因为它可以在我的组件和逻辑中的任何地方使用。 有人可以教我如何解决这个问题吗？我是 rtk-query 的新手，它看起来很酷，但它的实现方法似乎也很受限制。

这是我的 `api.ts` 切片的示例：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const apiEndpoint = 'http://localhost:5000';

export const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: apiEndpoint }),
  endpoints: builder => ({
    getFileById: builder.query<any, { id: string; fileId: string }>({
      query: arg => {
        const { id, fileId } = arg;
        return `/service/${id}/files/${fileId}`;
      },
    }),
  }),
});

// RTK Query will automatically generate hooks for each endpoint query
export const { useGetFileByIdQuery } = myApi;

使用 axios 的通用示例：

const handleSubmit = async (): Promise<void> => {
    try {
      const getResponse = await axios.get('my-endpoint/abc/123');
    }
    catch (e) {
     ...
    }
}

Answer 1

如果您使用查询，您将使用本地组件状态来设置查询参数

const [myState, setState] = useState(skipToken) // initialize with skipToken to skip at first
const result = useMyQuery(myState)

然后在您的点击处理程序中设置状态

const changePage = () => {
  setState(5)
}

但在您的情况下，您有一个表单提交，这听起来您想要使用“突变”，而不是查询。突变的要点是你对长期的结果并不真正感兴趣，而是想通过发送数据来触发服务器上的变化。

const [trigger, result] = useMyMutation()

可以这样称呼

const handleSubmit = () => {
  trigger(someValue)
}

Answer 2

还有一个选项可以将布尔值作为查询的第二个参数传递。

例如：

我用这个登录：

const [email, setEmail] = useState<string>('')
const [password, setPassword] = useState<string>('')
const [loginCredentials, setLoginCredentials] = useState<ILoginRequest>({ email: '', password: '' })

const { data, error, isError, isSuccess, isLoading } = useLoginQuery(loginCredentials, {
    skip: loginCredentials.email === '' && loginCredentials.password === '',
})

注意：组件加载时skip参数为false。当用户填写电子邮件和密码时，我正在设置电子邮件和密码状态。当按下登录按钮时，我设置了 loginCredentials 状态并触发了 RTK 查询。

在函数内部使用 RTK-Query 挂钩的方法？

Approaches for using RTK-Query hooks inside functions?

reactjs

redux

react-hooks

redux-toolkit

rtk-query

这是我的 `api.ts` 切片的示例：

使用 axios 的通用示例：

在函数内部使用 RTK-Query 挂钩的方法？

Approaches for using RTK-Query hooks inside functions?

reactjs

redux

react-hooks

redux-toolkit

rtk-query

这是我的 api.ts 切片的示例：

使用 axios 的通用示例：

这是我的 `api.ts` 切片的示例：