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
関数を渡します。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>
と トリガーの違いをどのように考えて対処すればよい(arg) => void
でしょうか。
ご返事ありがとうございます!