reactjs - 在函数中使用 RTK-Query 钩子的方法?
问题描述
我已经使用 Axios 成功编写了我的应用程序来获取内容。到目前为止,它已设置为在某些事件发生时获取内容(例如单击提交按钮)。但是,我正在尝试使用Redux 的 RTK-Query解决方案。这个包生成钩子,在它们的示例中,它们提供了简单的组件级示例,这些示例在挂载时调用钩子。
我如何利用这些 rtk-hooks(以及一般的钩子),以便将它们与 、 和条件事件等行为联系onClick
起来onSubmit
?我知道这与钩子规则准则相冲突,但我无法想象 RTK-Query 会受到如此限制,以至于只允许组件级 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) {
...
}
}
解决方案
如果您使用查询,您将使用本地组件状态来设置查询参数
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)
}
推荐阅读
- regex - 为什么这个正则表达式在 Python 中不匹配?
- python-3.x - 如何检查 Keras 后端功能是否正常工作?
- javascript - 如何覆盖 JavaScript 方法?
- reactjs - 无法通过 redux 获取 Firestore 数据
- java - 带有 ANSI Escape 序列和光标移动的 Java 扫描器在将光标移开和移回扫描器时显示 ^R
- c++ - 如何让代码读取不同的文件?
- javascript - 中断并重新启动 setTimeouts 循环
- python-3.x - 无法弄清楚条件
- python - 如果列表中的某个项目在python中有某个字符串,我该如何提取它?
- python - 计算一天中每一分钟数据框中有多少行“活动”的最有效方法是什么?