由于状态是全局管理的，为什么我会在组件内部出现无限循环？

Question

我正在使用 redux saga 和 redux 工具包。在 EachUser 组件中，如果我不使用 useEffect 挂钩，我不明白为什么组件会一遍又一遍地挂载。谁能帮我理解这是为什么。

我不会更改任何道具或状态，所以我认为无限循环不应该发生，但它正在发生。

这是我的代码沙箱的 link：Redux Saga With Redux toolkit

Answer 1

发生以下情况：

当您尝试在功能组件的顶层发送 FETCH_SINGLE_USER 操作时，它将在每个渲染周期执行（每次当 props 或 state 时，您的函数都会重新渲染（执行）改变了，它也会在父组件重新渲染时重新渲染（如果你不使用 React.memo）。因此，当您在功能组件的顶层调度操作时，它将

fetch user from the server 
->
update your store
->
updated store will cause re-render of the component as you are selecting updated state with useSelector
-> 
fetch user from the server action dispatched again (we are inside of the infinite loop)

那么为什么我们需要 useEffect - 它是帮助我们在特殊条件下进行一些操作的钩子。在第二个参数中，您应该放置一个依赖项数组，一旦依赖项更改，将导致 hook 重新运行。如果数组为空 - 当您的功能组件挂载时，挂钩将只执行一次。您还可以 return 清除组件后将执行的清理功能。有关 useEffect 挂钩的更多文档 here

Answer 2

尝试从依赖项数组中删除 dispatch

useEffect(() => {
    dispatch({ type: sagaActions.FETCH_SINGLE_USER, userId });
  }, [userId]);

在 useEffect 中调用函数并在依赖项数组中指定它可能会导致无限重新渲染

由于状态是全局管理的，为什么我会在组件内部出现无限循环？

Why am I getting an infinite loop inside the component as state is globally managed?

reactjs

redux

redux-saga

redux-toolkit