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

5cg8jx4n 于 2023-05-28 发布在 React

关注(0)|答案(2)|浏览(148)

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

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

我正在阅读一些相关的文章，同时我试图弄清楚这一点/等待一个有用的例子：

第二篇文章看起来有点相关，但我觉得它离这条路太远了，我怀疑是否值得安装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) {
     ...
    }
}

reactjs

来源：https://stackoverflow.com/questions/69096035/approaches-for-using-rtk-query-hooks-inside-functions

2条答案

按热度按时间

4nkexdtk1#

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

import { skipToken } from "@reduxjs/toolkit/query";
const [myState, setState] = useState(skipToken) // initialize with skipToken to skip at first
const result = useMyQuery(myState)

然后在单击处理程序中设置状态

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

在您的例子中，您有一个表单提交，听起来您想使用“mutation”，而不是查询。突变点在于，您并不真正对结果长期感兴趣，而是希望通过发送数据来触发服务器上的更改。

const [trigger, result] = useMyMutation()

那就叫做

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

赞(0）回复(0）举报 2023-05-28

9q78igpj2#

还有一个选项可以将boolean作为查询的第二个参数传递。
例如：
我用这个登录：

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查询。

赞(0）回复(0）举报 2023-05-28

我来回答

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

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

使用axios的通用示例：

2条答案

相关问题

热门标签

最新问答

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

下面是我的api.ts切片示例：

使用axios的通用示例：

2条答案

相关问题

热门标签

最新问答

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