使用 Redux-toolkit + RTK-query 取代 useContext (下)

janlin002

6 min readOct 9, 2023

這系列文章主要會分成上下兩集，上集會講團隊目前遇到的問題，跟如何建立基礎的 Redux-toolkit，下集會講如何使用 RTK-query

上集我們已經簡單的介紹了 Redux-toolkit 的用法，這集我們要來介紹 RTK-query (以下用 RTKQ 取代)

什麼是 RTKQ？

RTKQ 是由 Redux 團隊推出的套件，專門處理數據獲取和緩存(cache)工具，它旨在簡化在 Web 應用程序中加載數據的常見情況，讓我們不需要再自己手動編寫數據獲取和緩存邏輯。

RTKQ 提供了什麼功能？

最主要除了讓我們可以在 Redux 中執行非同步行為 (call api)，再來就是提供了 cache 的功能

什麼是 cache ?

我們常常聽到別人會說 cache 會比較快，且現在主流的狀態管理套件都自帶 cache 功能，但 cache 是什麼？有這麼重要嗎？
這邊舉個簡單的例子：大家在大學的時候，如果有需要寫報告，是不是都是抄同學的？好死不死大家都沒寫的話，才會自己寫，是吧？(不要騙自己啊)

這個概念其實就跟 cache 很像，當我們第一次進入一個網站時，瀏覽器會在你電腦裡的硬碟裡面找，是否有來過並且擁有一樣的資料？如果沒有的話才會發動請求，如果一樣的資料已經存在，瀏覽器就會直接從硬碟中存取，因此速度較快。

簡單介紹了 RTKQ 是什麼以後，接下來我們來看這個套件到底要怎麼使用？

createApi
createApi 是 RTKQ 裡面最核心的部分，它允許可以你客製化一組請求接口來描述如何從一系列 ( CRUD ) 請求接口檢索數據

fetchBaseQuery

fetchBaseQuery 讓你可以定義基本的配置，像是基本的 baseUrl

endpoints

代表對該服務器的操作和請求，所有的 CRUD functions 都會寫在 endpoints

裡面

簡單介紹 RTKQ 最核心的三個 Apis 以後，我們接著實做看看，來體驗一下 RTKQ 強大之處

實作

由於 RTKQ 是建立在 Redux-toolkit 之上的套件，所以不需要另外去下載

那這次我們就簡單做個 todoList 好了，首先先建立一個 createApi：

reducerPath 是這個 slice 的名稱，跟上集一樣，當被執行到後，會顯示在 devtools 上面

接著我們來寫 fetchBaseQuery：

記得 baseUrl 裡面放的只是 domain ，不要把整個請求的 url 塞進來了

接著再來寫 endpoints，我們先簡單建立一個 getTodo function

透過上面的寫法，我們可以 get 到 http://localhost:3500/todos 裡面的資料，這邊要注意 builder.query 是針對 get methods，等一下會講的 addTodos (post methods) 就會使用 builder.mutation

定義好以後，我們需要把 todoApiSlice 寫到 store 裡面，我們才可以全域調用，這邊 RTKQ 很貼心的把我們所有寫在 endpoints 裡面的 functions 都打包成了 hooks

接著我們寫到 store 裡面

基本上寫到這裡，就完成了，現在來試用看看

這樣就完成拉，並且他還有幾個狀態可以使用，過去我們的頁面在接收 api 來的資料時，都需要手動加上 isLoading 的狀態，但 RTKQ 卻幫我們都處理好了，是不是超方便？

2023/10/15 補充: 如果希望 RTKQ 的資料可以存在 redux 中，我們可以使用 RTKQ 釋出的 addMatcher 這個 Api ，當觸發到 addMatcher 第一個參數的行為，就會執行第二個參數的行為，要使用 addMatcher 我們需要在 createSplice 中先加入 extraReducers ，然後才能來寫 addMatcher

可以看到 addMatcher 第一個參數是我們 RTKQ 裡面的 todoApiSlice ，當今天 getTodo 被觸發，並且成功 (matchFullFilled) 以後，就會將 Api 回傳的資料寫入 state.todoTest 中
如果想針對 api 回來的資料先做一波封裝，可以創立一個 createSelector 然後對 state 裡面的資料做處理