reactjs - react + 终极版 : proper way to handle after-dispatch logic

Question

我有一个具有某些内部状态(例如 isLoading)的组件，它可以访问 redux 数据。在此组件中，我想发送一个 thunk 操作(api 请求)，从而导致 redux 数据更改。 thunk 完成后，我需要更改组件的状态。在我看来，有两种方法可以做到这一点:

1. 使用 thunk 的 promise 返回并在那里做我需要的一切，例如

handleSaveClick = (id) => {
    const { onSave } = this.props;
    this.setState({ isLoading: true });
    onSave(id).then(() => this.setState({ isLoading: false }));
};

1. 将回调传递给 thunk 并从 thunk 本身触发它，例如

  handleSaveClick = (id) => {
    const { onSave } = this.props;
    this.setState({ isLoading: true });
    onSave(id, this.onSaveSuccess);
  };

哪一个是正确的方法？

Answer 1

更安全的方法是使用 promise 实现，因为您可以确定函数只会在 promise 被解决后运行。第二种实现没有固有的缺陷，但如果你的 thunk 中有任何东西是异步的，那么它就不会正常工作，因为它会在到达代码后运行，而不是在它上面的代码完成执行时运行。在处理任何可能异步的事情(服务器请求/加载数据/提交数据)时，使用 Promise 实现总是更安全。