redux中react vs redux的useEffect钩子



使用效果Hook是用来在react中执行网络请求等副作用的。

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

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

根据定义,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" })

这就是为什么处理网络请求或异步操作的操作创建者函数返回另一个以dispatch作为参数的函数的原因。该返回函数由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内部的任何东西。相反,我们使用了fetchData返回的函数中的dispatch形参。当您使用dispatch(fetchData())thunk将您的动作创建器函数转换为普通对象时;等待网络请求被解析或拒绝,然后根据网络请求的结果调度适当的操作。

那么useEffect在这个等式中的位置呢?

useEffect是一个React钩子,mimics从类组件中获取React生命周期方法。如果您想要进行网络请求或任何异步操作,可以在useEffect中完成。按照上面的Redux示例,您可以在useEffect中调用dispatch(fetchData())

Redux的想法是如果你正在使用Redux和异步做一些事情。例如,写入数据库

如果你只是在React中使用功能组件,并且你想要更新ui,那么你可以使用useEffect来检查更改。如果你正在使用基于类的组件,那么有一个内置的方法componentDidMount。内置的,你不需要把它和React一起导入。你需要为useEffect做的。

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

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

最新更新