0

RTK は初めてで、このライブラリをとても気に入っていますが、従来の開発方法とは少し異なるため、少し戸惑っています。

多くの場合、テーブル、ページング、およびクエリのロジックが繰り返されます。のuseAntdTableのように、これらの繰り返されるロジックをカスタム フックにカプセル化して UI ロジックをすばやく記述したい場合がありahooksますtableProps。テーブル コンポーネント:

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

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

useQueryただし、フックは promise を返さないため、これは RTK クエリには適用されません。だから私は自分自身をカプセル化する必要がありuseMyAntdTableます、別のフックuseQuery にパラメーターとして渡すことをお勧めしますか? または、 ?のtrigger関数を渡します。useLazyQueryRTKQ は型をエクスポートしないことに気がついた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>と トリガーの違いをどのように考えて対処すればよい(arg) => voidでしょうか。

ご返事ありがとうございます!

4

0 に答える 0