javascript - 如何调度两个动作，第一个完成后的第二个

Question

应用程序是这样的：

• actionGetData- 它分派一个 API 获取请求，该请求检索一些数据并将其显示在应用程序中。第一次在主组件中调度
• actionToggle- 应用程序中有一个切换按钮，当单击该按钮时，它会从上面显示的数据中修改一个值，向服务器发送一个 PUT 请求

问题是屏幕上的数据没有更新，所以我假设我们需要再次调用actionGetData。

我认为应该使用 async await 来完成，所以actionGetData等待进行actionToggle更改。这是正确的方法吗？

这是代码：

const ChildComponent = () => {
   const dispatch = useDispatch();
   const { data } = useSelector((state) => state.myData, shallowEqual);
   
   const toggleValue = (value) => {
      const payload = { resource: !value };
      dispatch(actionToggle(payload));
      dispatch(actionGetData());
   }

  return (
     <div>
      ...
      <button onClick={() => toggleValue(value)}>click me</button>
     </div>
  );
}

在这种情况下它似乎不起作用，试图使切换功能异步：const async toggleValue = ...并await在调度操作之前添加，仍然不起作用。

有什么建议么？

标签： javascriptreactjsreduxreact-reduxreact-hooks