如果异步操作已成功获取数据并更新状态，则也仅调度一次操作

Posted 2023-03-17

【中文标题】如果异步操作已成功获取数据并更新状态，则也仅调度一次操作

【英文标题】：Dispatch an action only once that too if an async action has successfully fetched data and updated the state

【发布时间】：2021-12-01 11:40:25

【问题描述】：

我只想分派一个动作一次，但我传递给这个动作的有效负载取决于另一个异步动作获取的结果，该动作也只运行一次。

const data=useSelector(aSelector.getData);
const selectedData=useSelector(bSelector.getSelectedData);

React.useEffect(()=>
       dispatch(sagaAction.fetchData());   //this is async action that sets state which I use to dispatch below action
       dispatch(simpleAction.setSelectedData(data.name);  //This action sets state which is used as selectedData.this action should run once when above action has succesfully fetched data .Both actions should run only once 

)

上面的代码并不完全正确。只是给出一个想法，我想实现什么以及我认为我可以如何做到这一点。是否有任何合理的方法可以实现这一目标。提前致谢。

【参考方案1】：

您需要将它们分成两个不同的useEffect 钩子，并像这样利用useEffect 的依赖参数：

const data = useSelector(aSelector.getData);
const selectedData = useSelector(bSelector.getSelectedData);

React.useEffect(() => 
  // The [data] array below tells React to run this useEffect when the
  // component mounts and then again any time `data` changes, 
  // but then we use the `if` statement to make sure
  // we only run the dispatch when `data` exists
  if(data) 
    dispatch(simpleAction.setSelectedData(data.name);
  
, [data])

React.useEffect(() => 
  // The empty array below tells React to only run this `useEffect` once when the component mounts
  dispatch(sagaAction.fetchData());
, [])

【讨论】：

正是我想要的。非常感谢