使用useEffect对状态更改作出反应

Question

我对钩子有点陌生，我正在使用一种我不知道是否可取的模式。我正在做的是将redux与useEffect挂钩混合在一起，这样，对于每一个有意义的状态更改，我的一个挂钩都会被触发并更新一些状态。

例如，如果我的减速器中有一个错误字段。我写这样的东西。

useEffect(() => {
if(state.error && !state.error.open) {
showSnackbar(state.error.text)
}
}, [state.error])

当用户关闭snackbar时，我会清除错误。

或

如果我想对点击按钮做出反应，并使用一些数据获取和更改页面：

(我明确设置用户点击的原因是，当用户点击下一页中的后退按钮时，我不会再次重定向到该页面，因为数据仍存在于存储中。(

useEffect(() => {
if(buttonClicked && state.someData.id > 0) {
history.push('/route');
}
}, [state.someData, buttonClicked]);

handleClick = () => {
dispatch(actions.fetchSomeData());
setUserClicked();
}

在我的组件中，有时我有7-8个useEffects来处理不同的事情，其中大多数都有条件行为。

很多时候我看到这样的代码：

const result = await dispatch(someAction);
if (result.payload.error)
{
//...
}
else
{
history.push(...);
}

与使用多个生命周期挂钩相比，这种模式是否有一些优势？

也许我用了第一种方式，因为它感觉更具陈述性？但是有很多有用的效果好吗？在上面的代码中，我用两个钩子处理了错误和成功。

谢谢。

Answer 1

如果编写过多的useEffect，则表明组件太大。您应该开始考虑创建较小的功能性/无状态组件(不需要呈现任何标记(。对于结构良好的代码，每个组件的几页代码是最大大小。更新：这里是没有效果的代码：

if(buttonClicked && state.someData.id > 0) {
return <Redirect to="/route" />
}
handleClick = () => {
dispatch(actions.fetchSomeData());
setUserClicked();
}