在onClick函数内分派三个动作，然后使用响应映射数据是同步的吗

Question

我想解析一个Excel工作表，并且在解析之前，我希望后端有一些数据来映射它。

因此，单击“提交”按钮后，我想一个接一个地触发三个操作，并将响应存储在存储区中。我为此使用redux-saga。在执行三个操作（api调用）之后，我将调用解析函数，并使用将从存储中获取的响应进行解析和映射。

我已经尝试一一分派这三个动作。但是，一旦到达网络客户端（即axios实例以调用api），它将变为异步，并执行下一行。

onSubmit = () => {

/*  I will set the loader on submit button till the api is called and all parsing of excel sheet is done. */

  this.setState({
    showLoader: true,
  }, () => {
    this.props.getData1(); //Will be saving it in store as data1
    this.props.getData2(); //Will be saving it in store as data2
    this.props.getData3(); //Will be saving it in store as data3

 /* After this I want to call the parsing function to parse the excel sheet data and map accordingly */

  parseExcelData(sheetData); //sheet data is the excel data
}

因此，我希望当我调用'parseExcelData'函数时，来自该存储的数据，即data1，data2和data3将在该函数中可用。但是所有的api调用都发生在工作表被解析之后。我已经使用saga生成器函数完成了它，并且工作正常。但是我想知道如何使用redux处理这种情况。

Answer 1

将api调用（或任何其他异步操作）放入传奇中不会使该动作同步，它仍然是异步的。另外，redux-saga实际上不支持从动作中获取结果-您通过动作触发了一个动作，因此，当动作完成后，它无法将结果返回到最初触发它的代码中。 （您可以尝试通过传递回调以及触发传奇的操作来解决此问题，并让传奇调用回调，但我不建议使用此方法。）

我建议使用传统动作创建者在不使用redux-saga的情况下实施此操作。操作创建者将返回做出异步api调用的promise，并在完成后使用结果进行解析。可能看起来像这样：

// action creator getData1, getData2, getData3
export const getData1 = () => {
  return fetch(apiUrl).then(result => {
    return result.json();
  }).then(resultJson => {
    // also fire an action to put it in the store here
    // if other parts of your app need the data
    return resultJson;
  }).catch(err => {
    console.error(err);
  });
};

// react component
// assumes 1, 2, and 3 cannot be parallelized
// could also be written with .then instead of await
onSubmit = async () => {
  this.setState({showLoader: true}, () => {
    const result1 = await this.props.getData1();
    const result2 = await this.props.getData2(result1);
    const result3 = await this.props.getData3(result2);
  });
}

您可以让动作创建者调度一个动作，以将数据放入结果中的解决方案代替。但这意味着您必须通过组件的props来获取新数据，这可能意味着componentDidUpdate中的某些内容将检查新props与旧props是否不同，如果有，则调用下一个数据提取器。 IMO认为这种方法更加尴尬。