javascript - 等待 `dispatch` 以隐藏带有 `setState` 的模态框

Question

我一直在使用 redux 来维护全局状态的 React 应用程序。但在特定组件中，我故意将 setState 与 dispatch 调用混合在一起。我只是使用 setState 来隐藏/显示模式容器并调度以执行网络操作。这是示例代码:

onButtonClick = () => { 
 this.setState({ showAddModal: true });
}

onButtonInModalClick = data => {
 this.props.dispatchSave(data);
 this.setState({ showAddModal: false });
};

现在，问题是 setState 没有等待 dispatchSave 完成。我什至尝试使用 await this.props.dispatchSave(data);。运气不好。我的问题是，在进行异步操作时，我们不能将 setState 与调度混合起来吗？如果是的话为什么？如果不是，我的方法有什么问题？

我正在尝试的摘要:

• 有一个可用的按钮，单击它时，将使用 setState 打开一个模式。
• 模态内部有一个可用按钮，单击它后，它会通过调度保存数据
• 执行操作后，将再次使用 setState 关闭模态框。

用于异步操作的代码:

const mapDispatchToProps = dispatch => ({
  dispatchSave(data) {
    dispatch(actions.save(data));
  }
});

//---------- Above is from the component file

save(data) {
 return async dispatch => {
  await httpSrc.save(data);
  dispatch(actions.setData({ data: [] }));
 };
},

Answer 1

主要问题是 mapDispatchToProps 没有返回由异步操作生成的。

定义mapDispatchToProps as an object 。这是一种与调度绑定(bind)的更短的方法，并且它将传递从 thunk 返回的 Promise:

const mapDispatchToProps = { dispatchSave: actions.save }; 

现在您可以等待发货了:

onButtonInModalClick = async data => {
  await this.props.dispatchSave(data);
  this.setState({ showAddModal: false });
};

我还会从操作中返回数据，因此在等待 thunk 时它将可用(如果需要):

save(data) {
  return async dispatch => {
    await httpSrc.save(data);

    dispatch(actions.setData({ data: [] }));

    return data;
  };
},