1

使用效果钩子用于执行反应中的网络请求等副作用。

redux-thunk 中间件也用于在 react 中执行诸如网络请求之类的副作用。

我很困惑，它们的实际应用有什么区别，还是只是选择问题。

4

2 回答 2

0

Redux thunk 是如果您正在使用 redux 并且正在异步执行某些操作。例如，写入数据库。

如果您只是在 React 中使用功能组件并且想要更新 ui，那么您将使用 useEffect 来检查更改。如果您使用基于类的组件，那么有一个内置方法 componentDidMount。内置，您不必将其与 React 一起导入。你需要为 useEffect 做些什么。

这是钩子的页面，它讨论了它是如何使用的。 https://reactjs.org/docs/hooks-effect.html

这是 thunks 的页面 https://redux.js.org/usage/writing-logic-thunks

于 2021-10-21T19:23:09.503 回答
0

的目的thunk不是按照定义执行副作用。

在 Redux 世界中，动作必须是带有必需键的普通对象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落入这个等式？

useEffectmimics是来自类组件的 React 生命周期方法的 React 钩子。如果你想发出网络请求，或者任何异步操作，你可以在useEffect. 按照上面的 Redux 示例，您将调用dispatch(fetchData())inside useEffect。

于 2021-10-21T19:48:10.760 回答