use effect hook 用于在 react 中執行諸如網路請求之類的副作用。
redux-thunk 中間件還用于在反應中執行諸如網路請求之類的副作用。
我很困惑，他們的實際應用有什么不同，還是只是一個選擇問題。
uj5u.com熱心網友回復：
Redux thunk 是如果您正在使用 redux 并且正在異步執行某些操作。例如，如寫入資料庫。
如果你只是在 React 中使用函式式組件并且想要更新 ui，那么你可以使用 useEffect 來檢查更改。如果您使用基于類的組件，則有一個內置方法 componentDidMount。內置于中，您不必將其與 React 一起匯入。你需要為 useEffect 做些什么。
這是鉤子的頁面，它討論了它是如何使用的。 https://reactjs.org/docs/hooks-effect.html
這是 thunk 的頁面 https://redux.js.org/usage/writing-logic-thunks
uj5u.com熱心網友回復：
的目的thunk不是按照定義執行副作用。
在 Redux 世界中，動作必須是具有必需 key 的普通物件type。一個例子：
const increaseAction = { type: "INCREASE" };
如果你想創建一個回傳一個動作的函式，這個函式也應該回傳一個動作物件，而不是別的。否則你不能調度動作創建者函式本身。
// Create an action creator
const increase = () => {
return { type: "INCREASE" };
}
// Now you can dispatch the result of this function
dispatch(increase());
但是，在處理異步網路請求時，您可能希望根據網路請求的當前狀態分派多個相應地更新狀態的操作。
// When starting network request
dispatch({ type: "FETCH_START" })
// When network request is successful
dispatch({ type: "FETCH_SUCCESS" })
// When network request fails
dispatch({ type: "FETCH_ERROR" })
這就是處理網路請求或異步操作的動作創建器函式回傳另一個將調度作為其引數的函式的原因。這個回傳函式由thunk中間件處理。現在我們可以使用引數中的調度函式來調度我們的動作。
const fetchData = () => async (dispatch) => {
dispatch({ type: "FETCH_START" });
try {
const data = await fetch("http://somedata.com/something").then(res => res.json());
dispatch({ type: "FETCH_SUCCESS", payload: data });
} catch {
dispatch({ type: "FETCH_ERROR" });
}
}
如果你意識到了，我們沒有回傳里面的任何東西fetchData。相反，我們使用了dispatch函式回傳的引數fetchData。當您dispatch(fetchData()),thunk將您的動作創建器功能轉換為普通物件時；等待網路請求被決議或拒絕，然后根據網路請求的結果分派適當的動作。
現在在哪里useEffect落入這個等式？
useEffect是mimics來自類組件的 React 生命周期方法的 React 鉤子。如果要進行網路請求，或者任何異步操作，都可以在useEffect. 按照上面的 Redux 示例，您將呼叫dispatch(fetchData())inside useEffect。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/330791.html
標籤：反应 还原 反应钩子 redux-thunk redux-中间件
上一篇：條件渲染輸入重疊文本