函数内部使用RTK-查询钩子的方法？

Question

我已经成功地使用Axios编写了我的应用程序来获取内容。到目前为止，它被设置为在某些事件发生时获取内容(比如单击了submit按钮)。然而，我正在试验Redux的RTK查询解决方案。这个包生成钩子，在它们的示例中，它们提供了简单的组件级示例来调用挂载上的钩子。

我如何利用这些RTK-钩子(和一般的钩子)来将它们绑定到像onClick**，** onSubmit**，和条件事件这样的行为上？**我知道这与https://reactjs.org/docs/hooks-rules.html准则相冲突，但我无法想象RTK-查询会如此有限，只允许组件级的onMount API调用。

我正在阅读一些相关的文章，我试图找出这一点/等待一个有用的例子：

• https://blog.logrocket.com/react-hooks-frustrations/
• https://redux-toolkit.js.org/rtk-query/usage/usage-without-react-hooks

第二篇文章似乎有点相关，但我觉得它的作用太远了，并提出了一个问题:是否值得安装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查询。