在 useEffect 中调用 Redux Action

Posted 2023-02-19

【中文标题】在 useEffect 中调用 Redux Action

【英文标题】：Call a Redux Action inside a useEffect

【发布时间】：2019-09-18 18:23:50

【问题描述】：

我的目标是在 useEffect 中调用一个动作。

const ShowTodos = (props) =>
   useEffect(()=>
    props.fetchTodos()
   ,[])
 
const mapStateToProps = (state)=>
  return 
    todos:Object.values(state.todos),
    currentUserId:state.authenticate.userId
  


export default connect(mapStateToProps,fetchTodos)(ShowTodos)

它工作正常，但我收到了警告

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array  react-hooks/exhaustive-deps.

但如果我要在useEffects 中添加props 作为我的第二个参数，那么它将无休止地运行。

我在这里的第一个解决方法是使用useRef，但它似乎总是会重新渲染，因此再次重新设置我认为在优化方面不好的 useRef。

const ref = useRef();
  ref.current = props;
  console.log(ref)


  useEffect(()=>
  ref.current.fetchTodos()
  ,[])

这里还有其他解决方法吗？

【问题讨论】：

Dan Abramov 在overreacted.io/a-complete-guide-to-useeffect 对此案也有深入的解释。值得一读。

【参考方案1】：

这是一个eslint 警告，如果useEffect 中的任何依赖项不是依赖项数组的一部分，则会收到警告。

在您的情况下，您在 useEffect 中使用 props.fetchTodos 并且 eslint 警告提示您提供 props 作为依赖项，以便如果 props 发生更改，useEffect 函数会从其闭包中获取更新的 props。

但是，由于 fetchTodos 不会在您的应用生命周期中发生变化，并且您希望仅在您可以针对您的案例禁用规则时运行效果。

const ShowTodos = (props) =>
   const  fetchTodos  = props
   useEffect(()=>
     fetchTodos()
     // eslint-disable-next-line import/no-extraneous-dependencies
   ,[])
 
const mapStateToProps = (state)=>
  return 
    todos:Object.values(state.todos),
    currentUserId:state.authenticate.userId
  


export default connect(mapStateToProps,fetchTodos)(ShowTodos)

但是，您可以在不禁用规则的情况下解决问题

const ShowTodos = (props) =>
   const  fetchTodos  = props
   useEffect(()=>
     fetchTodos()
   ,[fetchTodos])
 

不过，我建议您知道何时应该禁用规则或将值传递给依赖数组。

【讨论】：

@jt25，嗯，是的，你必须知道什么时候该做什么。您可以在this post 和this 中阅读有关如何做出此决定的更多信息

@skyboyer 感谢您的反馈。是的，这是一个复制粘贴错误

【参考方案2】：

您必须将 fetchTodos 添加到依赖项。

const ShowTodos = ( fetchTodos ) => 
  useEffect(() => 
    fetchTodos();
  , [fetchTodos])
  ...

或者像这样。

const ShowTodos = (props) => 
  const  fetchTodos  = props;

  useEffect(() => 
    fetchTodos();
  , [fetchTodos])
  ...

【讨论】：

为什么我需要这样做？

在依赖列表中包含 fetchTodos 时，它将被实例化多次，作者可能不需要。