如何用React-query解決狀態管理問題

這篇文章主要講解了“如何用React-query解決狀態管理問題”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何用React-query解決狀態管理問題”吧！

按照來源，前端有兩類「狀態」需要管理：

• 用戶交互的中間狀態

• 服務端狀態

在陳年的老項目中，通常用Redux、Mobx這樣的「全局狀態管理方案」無差別對待他們。

事實上，他們有很大區別：

用戶交互的中間狀態

比如組件的isLoading、isOpen，這類「狀態」的特點是：

• 以「同步」的形式更新

• 「狀態」完全由前端控制

• 「狀態」比較獨立(不同的組件擁有各自的isLoading)

這類「狀態」通常保存在組件內部。

當「狀態」需要跨組件層級傳遞，通常使用Context API。

再大范圍的「狀態」會使用Redux這樣的「全局狀態管理方案」。

服務端狀態

當我們從服務端請求數據：

function App() {   const [data, updateData] = useState(null);      useEffect(async () => {     const data = await axios.get('/api/user');     updateData(data);   }, [])    // 處理data }

返回的數據通常作為「狀態」保存在組件內部(如App組件的data狀態)。

如果是需要復用的通用「狀態」，通常將其保存在Redux這樣的「全局狀態管理方案」中。

這樣做有2個壞處：

1.需要重復處理請求中間狀態

為了讓App組件健壯，我們還需要處理請求中、出錯等中間狀態：

function App() {   const [data, updateData] = useState(null);   const [isError, setError] = useState(false);   const [isLoading, setLoading] = useState(false);      useEffect(async () => {     setError(false);     setLoading(true);     try {       const data = await axios.get('/api/user');       updateData(data);     } catch(e) {       setError(true);     }     setLoading(false);   }, [])    // 處理data }

這類通用的中間狀態處理邏輯可能在不同組件中重復寫很多次。

2.「緩存」的性質不同于「狀態」

不同于交互的中間狀態，服務端狀態更應被歸類為「緩存」，他有如下性質：

• 通常以「異步」的形式請求、更新

• 「狀態」由請求的數據源控制，不由前端控制

• 「狀態」可以由不同組件共享

作為可以由不同組件共享的「緩存」，還需要考慮更多問題，比如：

• 緩存失效

• 緩存更新

Redux一把梭固然方便。但是，區別對待不同類型「狀態」能讓項目更可控。

這里，推薦使用React-Query管理服務端狀態。

另一個可選方案是SWR[1]。你可以從這里[2]看到他們的區別

初識React-Query

React-Query是一個基于hooks的數據請求庫。

我們可以將剛才的例子用React-Query改寫：

import { useQuery } from 'react-query'  function App() {   const {data, isLoading, isError} = useQuery('userData', () => axios.get('/api/user'));      if (isLoading) {     return <div>loading</div>;   }      return (     <ul>       {data.map(user => <li key={user.id}>{user.name}</li>)}     </ul>   ) }

React-Query中的Query指一個異步請求的數據源。

例子中userData字符串就是這個query獨一無二的key。

可以看到，React-Query封裝了完整的請求中間狀態(isLoading、isError...)。

不僅如此，React-Query還為我們做了如下工作：

• 多個組件請求同一個query時只發出一個請求

• 緩存數據失效/更新策略(判斷緩存合適失效，失效后自動請求數據)

• 對失效數據垃圾清理

數據的CRUD由2個hook處理：

• useQuery處理數據的查

• useMutation處理數據的增/刪/改

在下面的例子中，點擊「創建用戶」按鈕會發起創建用戶的post請求：

import { useQuery, queryCache } from 'react-query';  unction App() {  const {data, isLoading, isError} = useQuery('userData', () => axios.get('/api/user'));  // 新增用戶  const {mutate} = useMutation(data => axios.post('/api/user', data));   return (    <ul>      {data.map(user => <li key={user.id}>{user.name}</li>)}      <button        onClick={() => {          mutate({name: 'kasong', age: 99})        }}      >        創建用戶      </button>    </ul>  )

但是點擊后userData query對應數據不會更新，因為他還未失效。

所以我們需要告訴React-Query，userData query對應的緩存已經失效，需要更新：

import { useQuery, queryCache } from 'react-query';  function App() {   // ...   const {mutate} = useMutation(userData => axios.post('/api/user', userData), {     onSuccess: () => {       queryCache.invalidateQueries('userData')     }     })      // ... }

通過調用mutate方法，會觸發請求。

當請求成功后，會觸發onSuccess回調，回調中調用queryCache.invalidateQueries，將userData對應的query緩存置為invalidate。

這樣，React-Query就會重新請求userData對應query的數據。

總結

通過使用React-Query(或SWR)這樣的數據請求庫，可以將服務端狀態從全局狀態中解放出來。

這為我們帶來很多好處：

• 使用通用的hook處理請求中間狀態

• 多余請求合并

• 針對緩存的更新/失效策略

• Redux等「全局狀態管理方案」可以更專注于「前端中間狀態」處理

感謝各位的閱讀，以上就是“如何用React-query解決狀態管理問題”的內容了，經過本文的學習后，相信大家對如何用React-query解決狀態管理問題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！