0

我是 RTK 新手，非常喜欢这个库，但是我有点迷茫，因为它和我传统的开发方式有点不同。

在很多情况下，表、分页和查询的逻辑是重复的。我们可能希望将这些重复的逻辑封装到自定义的 hooks 中快速编写 UI 逻辑，就像useAntdTable一样ahooks，传入一个查询函数，这个查询函数返回约定格式数据的 promise，然后自动tableProps为 Antd生成表格组件：

const fetchMyData = () => fetch(/** ... */).then((res) => res.json())

function App() {
  // This automatically generates a table with pagination query
  const { tableProps } = useAntdTable(fetchMyData)
  return <Table {...tableProps} />
}

但这不适用于 RTK 查询，因为useQuery钩子不返回承诺。所以我需要自己封装useMyAntdTable，但是，是否建议useQuery 作为参数传递给另一个钩子？或者传递trigger函数useLazyQuery？我注意到RTKQ没有导出UseQuery类型，所以我很困惑，是否可以这样写？

function App2() {
  const { tableProps } = useMyAntdTable(useQuery)
  // or this?
  const [trigger, result] = useLazyQuery()
  const { tableProps } = useMyAntdTable(trigger, result)
  return <Table {...tableProps} />
}

或者，我做错了什么，useQuery 可能提供了这样的方法，但是我没有找到？

const { query } = useQuery()
// query(arg).then(({ data, isLoading, isFetching, ...rest }) => {})
const { tableProps } = useAntdTable(query)

有没有推荐的方法来封装这种重复的业务逻辑？我应该如何思考和处理(arg) => Promise<Data>和 trigger之间的区别(arg) => void？

非常感谢您的回复！

4

0 回答 0