React redux 同步调用多个动作

Question

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

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

有些人可能会争辩说我可以有一个像这样的动作类型 clearAndInsert 和 reducer

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

但这不是我想要的。我想分派 clearVisited 并等到它清除数组之后，然后分派 addToVisited.Want 我正在获取 changeInfo 的控制台日志很奇怪。

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

Answer 1

减速器是同步的。 dispatch(clearVisited()); 完成后，商店已更新。然而，重新渲染一个 React 组件是 not 同步的，并且局部变量 visited 不会通过调度 action 来改变。所以你正在注销一个旧的局部变量，这会误导你认为 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));
};

Answer 2

这些值只会在它们的下一个 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
  };

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

你可以在useEffect中查看更新

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

React redux 同步调用多个动作

React redux call multiple actions synchronously

javascript

reactjs

react-redux

vuejs2