不使用 React Hooks 的用法
與 Redux 核心和 Redux Toolkit 類似，RTK Query 的主要功能與 UI 無關，且可與任何 UI 層搭配使用。RTK Query 也包含一個專門設計用於 React 的 createApi 版本，它會自動產生 React hooks。
雖然 React hooks 是預期大多數使用者使用 RTK Query 的主要方式，但程式庫本身使用純 JS 邏輯，且可搭配 React Class 元件，或獨立於 React 本身使用。
此頁面說明如何在不使用 React Hooks 的情況下與 RTK Query 互動，以適當使用 RTK Query 快取行為。
新增訂閱
快取訂閱用於告知 RTK Query 需要為端點擷取資料。可透過傳送附加至查詢端點的 initiate thunk action 建立器的結果，為端點新增訂閱。
使用 React hooks 時，此行為會改在 useQuery、useQuerySubscription、useLazyQuery 和 useLazyQuerySubscription 中處理。
const promise = dispatch(api.endpoints.getPosts.initiate())
const { refetch } = promise
// interact with the cache in the same way as you would with a useFetch...() hook
const { data, isLoading, isSuccess /*...*/ } = await promise
移除訂閱
移除快取訂閱對於 RTK Query 識別快取資料不再需要是必要的。這允許 RTK Query 清除並移除舊快取資料。
傳送查詢端點的 initiate thunk action 建立器的結果是一個 Promise，其中包含 unsubscribe 屬性。此屬性是一個函式，當呼叫時，將移除對應的快取訂閱。
使用 React hooks 時，此行為會改在 useQuery、useQuerySubscription、useLazyQuery 和 useLazyQuerySubscription 中處理。
// Adding a cache subscription
const promise = dispatch(api.endpoints.getPosts.initiate())
// Removing the corresponding cache subscription
promise.unsubscribe()
存取快取資料和要求狀態
可使用查詢端點的 select 函式屬性存取快取資料和要求狀態資訊，以建立選取器並使用 Redux 狀態呼叫該選取器。這會提供呼叫時快取資料和要求狀態資訊的快照。
endpoint.select(arg) 函式會建立一個新的選取器實例 - 它本身不是實際的選取器函式！
使用 React hooks 時，此行為會改在 useQuery、useQueryState 和 useLazyQuery 中處理。
const result = api.endpoints.getPosts.select()(state)
const { data, isSuccess, isError, error } = result
請注意，與自動產生的 hooks 不同，沒有 isFetching 旗標，而且如果狀態為待處理，isLoading 旗標將為 true，無論是否已有資料。
備忘
由於 endpoint.select(arg) 函數每次呼叫時都會傳回新的選取器，且這個實例本身已備忘，因此備忘選取器的建立（例如，在其他選取器中使用該備忘實例）可能會是理想的。這可以使用 createSelector 來完成
const createGetPostSelector = createSelector(
(id: string) => id,
(id) => api.endpoints.getPost.select(id),
)
const selectGetPostError = createSelector(
(state: RootState) => state,
(state: RootState, id: string) => createGetPostSelector(id),
(state, selectGetPost) => selectGetPost(state).error,
)
執行變異
變異用於更新伺服器上的資料。變異可以透過發送附加至變異端點的 initiate thunk 動作建立器結果來執行。
使用 React hooks 時，此行為會在 useMutation 中處理。
dispatch(api.endpoints.addPost.initiate({ name: 'foo' }))
範例
可以在以下位置找到不使用 React hooks 的使用範例
React 類別元件範例 中的PostDetail元件Svelte範例- 以下
快取生命週期訂閱類別元件範例
進一步資訊
- NgRx 維護人員 Brandon Roberts 寫了一篇名為 表兄弟們相處融洽：使用 NgRx Store 和 RTK Query 進行實驗 的文章，展示了一些將 RTK Query 整合到 NgRx 的方法
saulmoro/ngrx-rtk-query實作了 NgRx 等同於 RTKQ 自身 React hooks 中管理的訂閱生命週期