[[382128]]

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

• 用戶交互的中間狀態
• 服務端狀態

在陳年的老項目中，通常用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等「全局狀態管理方案」可以更專注于「前端中間狀態」處理

參考資料

[1]SWR: https://swr.vercel.app/

[2]這里: https://react-query.tanstack.com/comparison

 【編輯推薦】