如何使用React Hooks優雅的擷取資料？

原文連結：https://www.robinwieruch.de/react-hooks-fetch-data

作者簡介：https://overreacted.io/zh-hans/my-decade-in-review/

如果我們要請求一個接口獲得資料，并要周遊到目前頁面中渲染出來，可能會這麼寫

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
  const [data, setData] = useState({ hits: [] });
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=redux',
      );
      setData(result.data);
    };
    fetchData();
  }, []);
  
   return (
       // 資料展示區
       {data.hits}
    );
}
 
export default App;
           

如果我們需要修改位址中的查詢參數，用一個輸入框和一個送出按鈕實作。點選按鈕時改變url，進而使副作用拉取新的資料，代碼如下

export default function BestFetchData() {
    const [data, setData] = useState(0)
    const [query, setQuery] = useState('')
    const [url, setUrl] = useState('http://wthrcdn.etouch.cn/weather_mini?city=青島')
    useEffect(() => {
        const fetchData = async () => {
            const ret = await axios(url)
            setData(ret.data.data)
        }
        fetchData()
    }, [url])
    return (
        <div>
            <h3>可輸入内容再搜尋</h3>
            <input value={query} onChange={e => setQuery(e.target.value)} />
            <button type='button' onClick={() => setUrl('http://wthrcdn.etouch.cn/weather_mini?city=' + query)}>搜尋</button>

            {data && <>
                // 資料展示區
            </>}

        </div>
    )
}
           

下一步，我們加入loading和錯誤捕獲功能，并通過表單送出事件來實作搜尋

export default function () {
    const [data, setData] = useState('')
    const [query, setQuery] = useState('')
    const [url, setUrl] = useState('http://wthrcdn.etouch.cn/weather_mini?city=青島')
    const [isLoading, setIsLoading] = useState(false)
    const [isError, setIsError] = useState(false)

    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true)
            setIsError(false)
            try{
                const ret = await axios(url)
                setData(ret.data.data)
            }catch(e){
                setIsError(true)
            }
            setIsLoading(false)
        }
        fetchData()
    }, [url])

    return (
        <div>
            <h3>loading+錯誤捕捉+表單送出</h3>
            <p>輸入内容後可直接按回車</p>
            <form onSubmit={(e) =>{e.preventDefault(); setUrl('http://wthrcdn.etouch.cnn/weather_mini?city2==' + query)}}>
                <input value={query} onChange={e => setQuery(e.target.value)} />
                <button type='submit'>搜尋</button>
            </form>

            {isError&&<div style={{background:'pink',padding:'1rem',margin:'1rem'}}>出錯啦~~</div>}

            {data && (isLoading
                ? <div> loading...</div>
                : <>
                    // 資料展示區
                </>)}
        </div>
    )
}
           

可以使用自定義hooks來把請求相關邏輯進行封裝，以便複用。useFetchData 隻在乎邏輯處理而不關心資料。

const useFetchData = (initialUrl, initialData) => {
    const [url, setUrl] = useState(initialUrl)
    const [data, setData] = useState(initialData)
    const [isLoading, setIsLoading] = useState(false)
    const [isError, setIsError] = useState(false)
    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true)
            setIsError(false)
            try {
                const ret = await axios(url)
                setData(ret.data.data)
            } catch (e) {
                setIsError(true)
            }
            setIsLoading(false)
        }
        fetchData()
    }, [url])
    return [{ data, isLoading, isError }, setUrl]
}

export default function () {
    const [query, setQuery] = useState('')
    const [{ data, isLoading, isError }, doFetch] = useFetchData('http://wthrcdn.etouch.cn/weather_mini?city=青島', null)
    return (
        <div>
            <h3>抽取自定義hooks為公用</h3>
            <p>輸入内容後可直接按回車</p>
            <form onSubmit={(e) => { e.preventDefault(); doFetch('http://wthrcdn.etouch.cn/weather_mini?city=' + query) }}>
                <input value={query} onChange={e => setQuery(e.target.value)} />
                <button type='submit'>搜尋</button>
            </form>

            {isError && <div style={{ background: 'pink', padding: '1rem', margin: '1rem' }}>出錯啦~~</div>}

            {data && (isLoading
                ? <div> loading...</div>
                : <>
                    // 資料展示區
                </>)}
        </div>
    )
}
           

可以使用reducer把自定義hook裡面比較獨立的邏輯再次封裝

const dataFetchReducer = (state, action) => {
    switch (action.type) {
        case 'FETCH_INIT':
            return { ...state, isLoading: true, isError: false }
        case 'FETCH_SCUESS':
            return { ...state, isError: false, isLoading: false, data: action.payload }
        case 'FETCH_FAILURE':
            return { ...state, isLoading: false, isError: true }
        default:
            throw new error();
    }
}

const useDataApi = (initialUrl, initialData) => {
    const [state, dispatch] = useReducer(dataFetchReducer, {
        data: initialData,
        isLoading: false,
        isError: false
    })
    const { data, isLoading, isError } = state
    const [url, setUrl] = useState(initialUrl)
    useEffect(() => {
        const fetchData = async () => {
            dispatch({ type: 'FETCH_INIT' })
            try {
                const ret = await axios(url)
                dispatch({ type: 'FETCH_SCUESS', payload: ret.data.data })
            } catch (e) {
                dispatch({ type: 'FETCH_FAILURE' })
            }
        }
        fetchData()
    }, [url])
    return [state, setUrl]
}

export default function () {
    const [query, setQuery] = useState('')
    const commonUrl = 'http://wthrcdn.etouch.cn/weather_mini?city='
    const [{ data, isLoading, isError }, doFetch] = useDataApi(commonUrl + '青島', null)
    return (
        <div>
            <h3>使用reducer</h3>
            <p>輸入内容後可直接按回車</p>
            <form onSubmit={(e) => {
                e.preventDefault()
                doFetch(commonUrl + query)
            }}>
                <input value={query} onChange={e => setQuery(e.target.value)} />
                <button type='submit'>搜尋</button>
            </form>

            {isError && <div style={{ background: 'pink', padding: '1rem', margin: '1rem' }}>出錯啦~~</div>}

            {data && (isLoading
                ? <div> loading...</div>
                : <>
                    // 資料展示區
                </>)}
        </div>
    )
}
           

結束