React redux 同步调用多个动作答案

【问题标题】：React redux call multiple actions synchronouslyReact redux 同步调用多个动作
【发布时间】：2021-12-27 05:58:24
【问题描述】：

在店内我有一个名为visited:[] 的数组。在一个名为changeInfo 的函数中，首先我需要清除数组，然后将一个项目添加到数组中。

 const changeInfo = (value) => {
    dispatch(clearVisited());
    console.log("before visited", visited);
    dispatch(addToVisited(value));
    console.log("after visited", visited);
  };

有些人会争辩说我可以有一个动作类型 clearAndInsert 和这样的减速器

 case CLEAR_AND_INSERT:
      return {
        visited: [action.payload],
      };

但这不是我想要的。我想分派 clearVisited 并等到它清除数组之后再分派 addToVisited。想要我得到changeInfo 的控制台日志很奇怪。

如何在 React 中同步调用两个操作？

【问题讨论】：

这些值只会在它们的下一个 render() 中更新，所以你不能在同一个函数中读取值。在 useEffect 中添加控制台。

标签： javascript reactjs vuejs2 react-redux

【解决方案1】：

这些值只会在它们的下一个 render() 中更新，所以你不能在同一个函数中读取值。在 useEffect 中添加控制台。

下面的方法只会打印旧值，不会更新一个

 const changeInfo = (value) => {
    dispatch(clearVisited());
    console.log("before visited", visited); //this will only console previous value, because it is not yet updated
    dispatch(addToVisited(value));
    console.log("after visited", visited); //this will only console same previous value, because it is not yet updated
  };

你可以调用actions，它会一个接一个地更新reducer

您可以在 useEffect 中检查更新

useEffect(()=> {
  console.log(visited)
},[visited])

【讨论】：

【解决方案2】：

减速器是同步的。 dispatch(clearVisited()); 完成后，商店已更新。然而，重新渲染一个 React 组件不是同步的，并且局部变量 visited 不会通过调度一个动作来改变。因此，您正在注销一个旧的局部变量，这会误导您认为 redux 存储尚未更新。

如果您想验证商店是否已更新，即使组件尚未重新渲染，您也可以直接从商店获取最新状态

const changeInfo = (value) => {
  dispatch(clearVisited());
  console.log("before visited", store.getState());
  dispatch(addToVisited(value));
  console.log("after visited", store.getState());
};

或者，如果您可以等待组件重新呈现，您可以将日志语句放在组件的主体中，而不是在 changeInfo 中。

console.log('rendering with', visited);

const changeInfo = (value) => {
  dispatch(clearVisited());
  dispatch(addToVisited(value));
};

【讨论】：