Question

我对钩子有些陌生，并且使用的是我不知道是否需要的模式。我正在做的是将redux与useEffect钩子混合使用，以便对每个有意义的状态更改都触发一个钩子并更新一些状态。

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

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

并且我清除了用户关闭快餐栏的错误。

或

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

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

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(...);
}

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

也许我使用第一种方法是因为它更具声明性？但是具有许多useEffects很好吗？在上面的代码中，我通过两个钩子处理了错误和成功。

谢谢。

Answer 1

如果您写过多的useEffect，则表明您的组件太大。您应该开始研究创建较小的功能/无状态组件（不必呈现任何标记）。每个结构的几页代码是结构良好的代码的最大大小。更新：这是无效的代码：

if(buttonClicked && state.someData.id > 0) {
    return <Redirect to="/route" />
}

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

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

1 个答案: