iT邦幫忙

2022 iThome 鐵人賽

1
自我挑戰組

30天深入淺出Redux系列 第 31

[DLC] React Query 補充包

  • 分享至 

  • xImage
  •  

這篇是補足大家的求知慾,還記得我開頭說的 React Query 嗎?

我秉持著勤儉持家的客家精神,想說不要浪費我們建立好的 todo api server,順便也做了一個 React Query 版本的 todo list 範例,在我 gitHub連結 中,但這次我就沒有再拆分的很細了,我想大家如果都乖乖的從第一集跟到這裡的話,這種程度的拆分應該不用再次做示範了吧!

還記得我們剛剛處理完的 RTK Query 的方法嗎?

這時候看應該會覺得很類似,事實上本尊其實是 React Query 先有這樣的概念,而 Redux toolkit 借鏡相同的概念而開發出來的產物。

舉例來說,早期還沒有 RTK query 的出現我們通常會採用 useEffect 的 Hook 來處理我們的 api,但這樣做其實有點浪費效能,怎麼說呢?

https://ithelp.ithome.com.tw/upload/images/20221012/201290202UfeUYDoWo.png

上面是一般用 useEffect 打 api 的流程,相同的概念我們會需要透過另一個狀態管理來做調節,畫面才不會像傳統 SSR 那樣突然蹦出來,但如果每個 component 都有那段無資料的尷尬期間是不是要考慮整理一個 custom hook 出來做,不要讓每個 component 都等。

這時候你會想到 Redux 或是 context Porvider 的方式結合 api hook,也就是 RTK Query 或 React Query 所做的事情。

當然更早一點在生命週期還未出現的時候有類似的優化辦法,但為了節省 coding 的時間與篇幅,小妥協也是可以理解的,當然我自己的做法會比較類似 angular services 的概念去封裝所有 API 的項目再提供給 action 引用,但這樣的做法其目的就只是在 React 和 server 之間扮演了資料管理和 cache 的角色,控制什麼時候要更新 cache、什麼時候要重新向 server 發送 API 請求。

以上,皆為個人淺見,重點是提供 React Query 的範例給大家參考,深入的話也許後續有機會再補充說明。

心得感想

這次鐵人賽的分享就到這裡了,真心花了不少時間製作這些範例檔案,其實本來是想做 micro FontEnd 主題的,但我覺得要細部講解內容太過龐大了,我是不喜歡懂點皮毛就吹到滿分啦,沒有經過消化的東西就吐出來要人看,也有點不負責任,不是我的作風,也許明年有機會的話吧!

source code: gitHub連結


上一篇
Redux 深入淺出 - [ Day 30 ] React RTK Query Typescript todo list - 新增功能 & 結語
系列文
30天深入淺出Redux31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言