相關說明：
-
對於hook相關詞不翻譯，感覺翻譯後怪怪的。
-
effect hook 效果鉤子，用於執行一些副作用例如獲取數據 。
-
state hook 狀態鉤子。
-
使用----------- 和 ----------- 標出代碼需要關注的地方。
渣翻譯如下：
在這個指南中，我想給你展示使用state和effect hook在React hooks中如何獲取數據。我們將使用著名的 Hacker News API從高科技世界中獲取受歡迎的文章。你也可以爲獲取數據實現自定義獲取數據的hook，這個hook可以在你的應用中任何地方重用，也可以作爲一個獨立的node包發佈到npm上。
如果關於react的新特性你什麼都不知道，可以查看這篇文章introduction to React Hooks。如果你想查看怎麼通過React Hooks獲取數據例子的完整項目，查看這個GitHub 倉庫。
如果你只是想在使用React Hook獲取數據前有一個準備：npm install use-data-api 並且參照這個文檔。如果你採用了不要忘了小星星哦:-)。
**注：**在未來，React沒有計劃爲獲取數據添加專門的Hooks。反而，Suspense將會負責這個功能。下面的預演是學習react中關於state和effect hooks一個比較好的方法。
使用React Hooks獲取數據
如果你不熟悉在React中獲取數據，查看我的在react中獲取大量的數據這篇文章。這篇文章會引導你使用React Comopnent 類獲取數據，怎麼樣可以讓獲取數據的邏輯通過 Render Prop Components 和 Higher-Order Components重用，並且怎麼處理重用加載出錯和加載中的狀態。在這篇文章中，我想給你展示以上這些通過React Hooks在函數式組件中的做法。
import React, { useState } from 'react';
function App() {
const [data, setData] = useState({ hits: [] });
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
export default App
這個App組件展示了項目列表（hits 是 Hacker News 的文章）。這個state和跟新state的函數來自於狀態鉤子useState的調用，它的責任是管理本地我們將要爲App組件獲取的數據數據的狀態，初始狀態的數據是一個對象中的空列表。還沒有人爲這個數據設置任何狀態。
我們將使用axios去獲取數據，但是是使用其他獲取數據的庫還是使用瀏覽器原生的fetch API由你決定。如果你還沒有安裝axios，你可以在命令行輸入npm install axios。然後實現你自己的獲取數據的effect hook。
// -------------------------------------------------
import React, { useState, useEffect } from 'react';
import axios from 'axios';
// -------------------------------------------------
function App() {
const [data, setData] = useState({ hits: [] });
// -------------------------------------------------
useEffect(async () => {
const result = await axios(
'http://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
});
// -------------------------------------------------
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
export default App;
名爲useEffect的effect hook被用於使用axios從接口獲取數據，並且通過狀態鉤子的更新函數設置數據到組件的本地狀態中。promise 通過 async/await中 被 resolve。
然而，當你運行你的應用的的時候，你應該會陷入一個令人討厭的循環。effect hook會在組件掛載的時候運行但是也會在組件跟新的時候運行。因爲我們在每次獲取數據之後設置狀態，然後組件跟新然後effect hook再次運行。組件將會一次又一次的獲取數據。這是一個需要避免的問題。我們只希望在組件掛載的時候獲取數據。
這就是爲什麼你需要提供一個空數組作爲effect hook的第二個參數的原因，是爲了阻止在組件更新的時候激活它，只在組件掛載的時候激活它。
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
useEffect(async () => {
const result = await axios(
'http://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
// -------------------------------------------------
}, []);
// -------------------------------------------------
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
export default App;
第二個參數被用於定義鉤子依賴的所有變量（分配到這個數組中）。如果有一個變量改變，鉤子會再次運行。如果數組中沒有變量，這個鉤子在組件更新的時候就不會運行，因爲它沒有監聽任何變量。
還有最後一個問題。在代碼中，我們使用async/await從第三方接口獲取數據。根據文檔表述每個使用async註釋的函數都會返回一個隱含的promise對象：async函數聲明定義一個異步函數，返回一個異步函數對象。*An asynchronous function is a function which operates asynchronously via the event loop, *異步函數是一個操作通過事件循環操作異步的函數，使用隱式的Promise作爲結果返回”。However, an effect hook should return nothing or a clean up function.然而，一個effect hook不應該返回值或者返回一個清除函數。（這是個啥，return nothing）這就是爲什麼在你的開發者日誌裏面能看見下面的警告： 07:41:22.910 index.js:1452 Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect.。這就是爲什麼不允許在useEffect直接使用異步函數的原因。讓我們來修復它，通過異步函數取代effect hook。
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(
'http://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
};
fetchData();
// -------------------------------------------------
}, []);
return (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
);
}
export default App;
簡而言之這就是在React hooks中獲取數據。但是如果你對錯誤處理，加載狀態，怎麼從表單觸發數據獲取，怎麼實現一個重用的數據獲取鉤子感興趣， 請繼續閱讀。
如何以編程的方式/手動觸發鉤子
很好，我們將會在組件掛載的時候獲取一次數據。但是怎麼使用輸入的字段去告訴接口我們感興趣的話題呢？“Redux“作爲默認的查詢。但是哪些話題是關於"React"的呢？讓我們實現一個輸入框去讓人能夠獲取Redux以外的其他信息。因此爲輸入框引入一個新的狀態。
import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
// -------------------------------------------------
const [query, setQuery] = useState('redux');
// -------------------------------------------------
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'http://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
};
fetchData();
}, []);
return (
<Fragment>
{/* ------------------------------------------------- */}
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
{/* ------------------------------------------------- */}
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
</Fragment>
);
}
export default App;
目前，每個狀態都是獨立的，但是現在你想結合他們只獲取通過輸入框輸入的查詢字段指定文章。通過下面的改變，組件應該在掛載的時候通過查詢字段獲取一次所有文章。
...
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
useEffect(() => {
const fetchData = async () => {
const result = await axios(
// -------------------------------------------------
`http://hn.algolia.com/api/v1/search?query=${query}`,
// -------------------------------------------------
);
setData(result.data);
};
fetchData();
}, []);
return (
...
);
}
export default App;
有一塊被遺漏了：當你在輸入框中輸入內容的時候，在組件掛在之後effect hook不會獲取其他數據。這是因爲你用一個空數組作爲effect hook函數的第二個參數。這個副作用就沒有依賴的變量，所以它只在組掛載的時候觸發。然而，現在effect hook應該依賴query。一旦query改變，就應該再次請求數據。
...
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
useEffect(() => {
const fetchData = async () => {
const result = await axios(
`http://hn.algolia.com/api/v1/search?query=${query}`,
);
setData(result.data);
};
fetchData();
// -------------------------------------------------
}, [query]);
// -------------------------------------------------
return (
...
);
}
export default App;
在你改變輸入框中的值的時候應該獲取一次數據。但是它帶來了另一個問題：你在輸入框中輸入每一個字符都會觸發並執行effect hook，然後執行獲取其他數據。提供一個按鈕去觸發請求，手動觸發鉤子怎麼樣？
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
// -------------------------------------------------
const [search, setSearch] = useState('');
// -------------------------------------------------
useEffect(() => {
const fetchData = async () => {
const result = await axios(
`http://hn.algolia.com/api/v1/search?query=${query}`,
);
setData(result.data);
};
fetchData();
}, [query]);
return (
<Fragment>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
{/* ------------------------------------------------- */}
<button type="button" onClick={() => setSearch(query)}>
Search
</button>
{/* ------------------------------------------------- */}
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
</Fragment>
);
}
現在，讓effect hook依賴search狀態而不是根據輸入的每個內容波動的query狀態，用戶點擊一次按鈕，新的search狀態就會被設置並且應該手動觸發一次effect hook。
...
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
// -------------------------------------------------
const [search, setSearch] = useState('redux');
// -------------------------------------------------
useEffect(() => {
const fetchData = async () => {
const result = await axios(
// -------------------------------------------------
`http://hn.algolia.com/api/v1/search?query=${search}`,
// -------------------------------------------------
);
setData(result.data);
};
fetchData();
// -------------------------------------------------
}, [search]);
// -------------------------------------------------
return (
...
);
}
export default App;
search的初始狀態也應該和query的初始狀態一樣，因爲組件也會在掛載的時候獲取數據，因此結果應該和輸入的一致。然而，query的search狀態一樣讓人有點疑惑。爲啥不把search的狀態換成真實的URL呢？
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
// -------------------------------------------------
const [url, setUrl] = useState(
'http://hn.algolia.com/api/v1/search?query=redux',
);
// -------------------------------------------------
useEffect(() => {
const fetchData = async () => {
// -------------------------------------------------
const result = await axios(url);
// -------------------------------------------------
setData(result.data);
};
fetchData();
// -------------------------------------------------
}, [url]);
// -------------------------------------------------
return (
<Fragment>
<input
type="text"
value={query}
{/* ------------------------------------------------- */}
onChange={event => setQuery(event.target.value)}
{/* ------------------------------------------------- */}
/>
<button
type="button"
onClick={() =>
setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)
}
>
Search
</button>
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
</Fragment>
);
}
這就是使用effect hook隱式獲取數據的情況。你可以決定這個effect hook依賴哪個狀態，一旦你在點擊的時候或者其他副作用設置這個狀態，這個effect hook將會再次執行。在這個案例中，如果URL狀態改變了，effect hook會再次執行從接口中獲取數據。
React Hooks中的加載指示
讓我來介紹一個獲取數據的加載指示器。它就是另一個狀態鉤子（state hook）管理的狀態（state）。這個加載的標誌被用於在App組件中渲染一個加載中的指示器。
import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
const [url, setUrl] = useState(
'http://hn.algolia.com/api/v1/search?query=redux',
);
// -------------------------------------------------
const [isLoading, setIsLoading] = useState(false);
// -------------------------------------------------
useEffect(() => {
const fetchData = async () => {
// -------------------------------------------------
setIsLoading(true);
// -------------------------------------------------
const result = await axios(url);
setData(result.data);
// -------------------------------------------------
setIsLoading(false);
// -------------------------------------------------
};
fetchData();
}, [url]);
return (
<Fragment>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button
type="button"
onClick={() =>
setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)
}
>
Search
</button>
{/* ------------------------------------------------- */}
{isLoading ? (
<div>Loading ...</div>
) : (
{/* ------------------------------------------------- */}
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
{/* ------------------------------------------------- */}
)}
{/* ------------------------------------------------- */}
</Fragment>
);
}
export default App;
當effect hook在組件掛在或者URL狀態改變的時候被調用去獲取數據，這個加載狀態就會被設置爲true。當請求完成了，這個加載狀態就會再次被設置爲false。
React Hooks的錯誤處理
在React hook怎麼處理獲取數據出錯呢？這個錯誤只是通過另一個狀態鉤子初始化的。當這個狀態表示出錯了，這個 App組件可以給用戶一個反饋。當使用 async/await，常用try/catch塊去處理錯誤。你可以在effect hook裏面這樣做：
import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ hits: [] });
const [query, setQuery] = useState('redux');
const [url, setUrl] = useState(
'http://hn.algolia.com/api/v1/search?query=redux',
);
const [isLoading, setIsLoading] = useState(false);
// -------------------------------------------------
const [isError, setIsError] = useState(false);
// -------------------------------------------------
useEffect(() => {
const fetchData = async () => {
// -------------------------------------------------
setIsError(false);
// -------------------------------------------------
setIsLoading(true);
// -------------------------------------------------
try {
// -------------------------------------------------
const result = await axios(url);
setData(result.data);
// -------------------------------------------------
} catch (error) {
setIsError(true);
}
// -------------------------------------------------
setIsLoading(false);
};
fetchData();
}, [url]);
return (
<Fragment>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button
type="button"
onClick={() =>
setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)
}
>
Search
</button>
{/* ------------------------------------------------- */}
{isError && <div>Something went wrong ...</div>}
{/* ------------------------------------------------- */}
{isLoading ? (
<div>Loading ...</div>
) : (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
)}
</Fragment>
);
}
export default App;
這個錯誤的狀態在鉤子每次執行的時候都會被重置。這是很有用的，因爲在失敗的請求之後，用戶回想再次嘗試，應該重置錯誤狀態。爲了檢查出錯的情況，你可以將URL更改爲無效的內容。然後查看錯誤消息是否顯示。
通過React和表單的獲取數據
在表單中如何獲取數據？至今，我們只組合了input和按鈕。當你引入了更多的輸入元素，你就會想要使用表單元素包裹他們。另外，一個表單可能通過鍵盤的回車鍵觸發按鈕觸發提交。
function App() {
...
return (
<Fragment>
{/* ------------------------------------------------- */}
<form
onSubmit={() =>
setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)
}
>
{/* ------------------------------------------------- */}
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
{/* ------------------------------------------------- */}
<button type="submit">Search</button>
</form>
{/* ------------------------------------------------- */}
{isError && <div>Something went wrong ...</div>}
...
</Fragment>
);
}
但是現在瀏覽器在你點擊提交按鈕的時候會刷新，因爲這是一個瀏覽器提交表單的原生行爲。爲了阻止默認行爲，我們可以調用React事件對象的函數。就像你在React類組件中做的那樣。
function App() {
...
return (
<Fragment>
{/* ------------------------------------------------- */}
<form onSubmit={event => {
{/* ------------------------------------------------- */}
setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`);
{/* ------------------------------------------------- */}
event.preventDefault();
}}>
{/* ------------------------------------------------- */}
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button type="submit">Search</button>
</form>
{isError && <div>Something went wrong ...</div>}
...
</Fragment>
);
}
現在點擊提交按鈕的時候瀏覽器就不會再刷新了。它就像之前那樣工作，但是這次使用form替換了原生的輸入字段和按鈕的結合。你也可以在鍵盤上按回車鍵提交表單。
自定義獲取數據鉤子
爲了提取一個自定義獲取數據的鉤子，移動每個屬於數據獲取數據的代碼到自己的函數，除了屬於輸入字段的query狀態，但是包含加載指示器和錯誤處理。也要確定你在函數中返回了所有App組件裏必要的變量。
// -------------------------------------------------
const useHackerNewsApi = () => {
// -------------------------------------------------
const [data, setData] = useState({ hits: [] });
const [url, setUrl] = useState(
'http://hn.algolia.com/api/v1/search?query=redux',
);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await axios(url);
setData(result.data);
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, [url]);
// -------------------------------------------------
return [{ data, isLoading, isError }, setUrl];
}
// -------------------------------------------------
現在，你的新鉤子在App組件中又可以使用了。
function App() {
const [query, setQuery] = useState('redux');
// -------------------------------------------------
const [{ data, isLoading, isError }, doFetch] = useHackerNewsApi();
// -------------------------------------------------
return (
<Fragment>
<form onSubmit={event => {
{/* ------------------------------------------------- */}
doFetch(`http://hn.algolia.com/api/v1/search?query=${query}`);
{/* ------------------------------------------------- */}
event.preventDefault();
}}>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button type="submit">Search</button>
</form>
...
</Fragment>
);
}
初始狀態也可以通用，通過它簡化新的自定義鉤子。
import React, { Fragment, useState, useEffect } from 'react';
import axios from 'axios';
// -------------------------------------------------
const useDataApi = (initialUrl, initialData) => {
const [data, setData] = useState(initialData);
const [url, setUrl] = useState(initialUrl);
// -------------------------------------------------
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await axios(url);
setData(result.data);
} catch (error) {
setIsError(true);
}
setIsLoading(false);
};
fetchData();
}, [url]);
return [{ data, isLoading, isError }, setUrl];
};
function App() {
const [query, setQuery] = useState('redux');
// -------------------------------------------------
const [{ data, isLoading, isError }, doFetch] = useDataApi(
'http://hn.algolia.com/api/v1/search?query=redux',
{ hits: [] },
);
// -------------------------------------------------
return (
<Fragment>
<form
onSubmit={event => {
doFetch(
`http://hn.algolia.com/api/v1/search?query=${query}`,
);
event.preventDefault();
}}
>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button type="submit">Search</button>
</form>
{isError && <div>Something went wrong ...</div>}
{isLoading ? (
<div>Loading ...</div>
) : (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
)}
</Fragment>
);
}
export default App;
通過自定義鉤子獲取數據。這個鉤子自己不知道關於接口的任何信息。他接受所有從外面傳入的參數並且只管理必要的狀態，例如data，加載狀態和錯誤狀態。他執行請求和返回數據給把它當做自定義獲取數據鉤子使用的組件。
使用Reducer Hook獲取數據
至今，我們使用各個state hooks 去管理我們數據的數據獲取狀態，加載和錯誤狀態。然而，不知爲啥，這些狀態被自己的state hook管理，它們應該屬於一起的因爲它們關心相同的原因。就像你看到的一樣它們都在數據獲取函數中使用。它們是一起的一個很好的標誌是它們一個接着一個的使用（e.g setIsError，setIsLoading）。讓我們使用Reducer Hook結合並替換它們。
一個Reducer Hook 使用一個state對象和一個函數生成一個state對象。這個函數被稱爲 —— dispatch函數 —— 分發一個action，這個action裏面有一個type屬性和一個可選的payload對象。所有這些信息在真實的reducer函數中被使用去從之前的狀態生成一個新的狀態，所有信息表示爲這個action的payload和type。讓我們看看在代碼中是怎麼工作的。
import React, {
Fragment,
useState,
useEffect,
// -------------------------------------------------
useReducer,
// -------------------------------------------------
} from 'react';
import axios from 'axios';
// -------------------------------------------------
const dataFetchReducer = (state, action) => {
...
};
// -------------------------------------------------
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
// -------------------------------------------------
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
// -------------------------------------------------
...
};
這個Reducer Hook使用reducer函數和初始的狀態對象作爲參數。在我們的例子裏，data的初始化狀態，loading和error的初始狀態沒有改變，但是它們替換了單個state hooks，通過reducer hook彙總到一個state對象裏面管理。
const dataFetchReducer = (state, action) => {
...
};
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
useEffect(() => {
const fetchData = async () => {
// -------------------------------------------------
dispatch({ type: 'FETCH_INIT' });
// -------------------------------------------------
try {
const result = await axios(url);
// -------------------------------------------------
dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
// -------------------------------------------------
} catch (error) {
// -------------------------------------------------
dispatch({ type: 'FETCH_FAILURE' });
// -------------------------------------------------
}
};
fetchData();
}, [url]);
...
};
現在，獲取數據的時候可以使用dispatch函數發送一個信息給reducer函數。dispatch分發的對象有一個約定的type屬性和一個可選的payload屬性。這個type告訴reducer函數哪個狀態需要改變和reducer可以使用payload去提取一個新的state。畢竟我們只有三個狀態改變：初始的獲取進程。通知成功的數據獲取結果。通知失敗的數據獲取結果。
在自定義鉤子的最後，這個state就像之前一樣被返回出去，但是因爲我們一整個state對象，所以再也沒有獨立的state了。這樣，使用useDataApi自定義鉤子的人還可以訪問到 data，isLoading和 isError。
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
...
// -------------------------------------------------
return [state, setUrl];
// -------------------------------------------------
};
最後但是很重要的是，缺少reducer函數的實現。它需要發出三個不同的狀態轉換，叫作 FETCH_INIT， FETCH_SUCCESS 和 FETCH_FAILURE。每個狀態轉換需要返回一個新的狀態對象。讓我們看看這個怎麼通過switch case實現：
const dataFetchReducer = (state, action) => {
// -------------------------------------------------
switch (action.type) {
case 'FETCH_INIT':
return { ...state };
case 'FETCH_SUCCESS':
return { ...state };
case 'FETCH_FAILURE':
return { ...state };
default:
throw new Error();
}
// -------------------------------------------------
};
一個reducer函數可以通過它的arguments訪問當前的state和action。現在switch case語句每個狀態被轉換隻返回之前的state。使用解構語句去保證state對象不可變 - 意味着state是不能直接改變的 - 這是最佳實踐。現在讓我們覆蓋一些當前的state需要被返回的屬性來改變狀態轉換的狀態：
const dataFetchReducer = (state, action) => {
switch (action.type) {
case 'FETCH_INIT':
return {
...state,
// -------------------------------------------------
isLoading: true,
isError: false
// -------------------------------------------------
};
case 'FETCH_SUCCESS':
return {
...state,
// -------------------------------------------------
isLoading: false,
isError: false,
data: action.payload,
// -------------------------------------------------
};
case 'FETCH_FAILURE':
return {
...state,
// -------------------------------------------------
isLoading: false,
isError: true,
// -------------------------------------------------
};
default:
throw new Error();
}
};
現在每個state的轉換。都是通過action的type決定的，基於上一個state和可選的payload屬性返回一個新的state。例如，在請求成功的案例裏，payload被用於設置新state對象的data。
總之，Reducer Hook確保狀態管理的這一部分用自己的邏輯封裝。通過提供action type和可選的payloads，你將總是可以預測變化。另外，你將不會再非法的state下運行。例如，先前可能搞錯了設置isLoading和isError狀態變成true。我們在這種情況下怎麼展示呢？現在每個狀態的改變都被reducer 函數變成一個合法的state對象。
在Effect Hook中阻止數據獲取
在React中設置未掛載組件的狀態是一個常見的問題（e.g. 由於通過React Router導航的）。我之前寫過關於這個問題的文章，它描述了在各種場景中如何阻止在未掛載的組件中設置state。讓我們看看怎麼在我們自定義的數據獲取鉤子裏面阻止狀態設置。
const useDataApi = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl);
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
});
useEffect(() => {
// -------------------------------------------------
let didCancel = false;
// -------------------------------------------------
const fetchData = async () => {
dispatch({ type: 'FETCH_INIT' });
try {
const result = await axios(url);
// -------------------------------------------------
if (!didCancel) {
// -------------------------------------------------
dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
// -------------------------------------------------
}
// -------------------------------------------------
} catch (error) {
// -------------------------------------------------
if (!didCancel) {
// -------------------------------------------------
dispatch({ type: 'FETCH_FAILURE' });
// -------------------------------------------------
}
// -------------------------------------------------
}
};
fetchData();
// -------------------------------------------------
return () => {
didCancel = true;
};
// -------------------------------------------------
}, [url]);
return [state, setUrl];
};
每個Effect Hook都有一個匹配的清除函數，它會在組件卸載的時候執行。這個清除函數是一個從hook中返回的函數。在我們的例子裏，我們使用名字爲didCancel的boolean類型的標誌讓我們數據獲取邏輯知道組件狀態（掛載的/未掛載的）。如果組件完成卸載，這個標誌應該設置爲true這個結果會阻止異步獲取數據完成之後設置組件的狀態 。
注：其實數據請求沒有被終止 — 可以通過Axios Cancellation實現終止請求的功能—但是狀態遷移在組件卸載後不會再執行。由於Axios Concellation在我看來沒有更好的API，這個boolean值的標誌也可以完成阻止設置state的工作。
你已經學會怎麼在React獲取數據的時候使用React hooks中的state和effets鉤子。
如果你對在React類組件（函數式組件）裏面使用render屬性和高階組件獲取數據感到好奇，查看本篇文章開始處我的其他文章。除此以外，我希望這篇文章有助於你學習React Hooks和在真實世界中使用他們。