在 onClick 函数中分派三个动作然后使用该响应映射数据是否同步

Question

我想解析一个 excel sheet 并且在解析之前我想要来自后端的一些数据来映射它。

所以在点击提交按钮后，我想一个一个地触发三个动作，并将响应存储在商店中。我正在为此使用 redux-saga。在三个操作（api 调用）之后，我将调用解析函数并使用我将从商店中获取的响应进行解析和映射。

我试过一个一个地调度这三个动作。但是一旦它到达网络客户端，即调用 api 的 axios 实例，它就会变为异步并执行下一行。

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 调用都发生在 sheet 被解析之后。我已经使用 saga 生成器函数完成了它并且工作正常。但是我想知道如何用redux处理这种情况。

Answer 1

将 api 调用（或任何其他异步操作）放入 saga 中不会使该操作同步，它仍然是异步的。另外，redux-saga 确实不支持从一个动作中获取结果——你用一个动作触发一个传奇，所以当传奇完成时，它无法 return 最初触发它的代码的结果. （您可以尝试通过将回调与触发 saga 的操作一起传递并让 saga 调用回调来解决此问题，但我不推荐这种方法。）

我建议在不使用传统动作创建器的情况下 redux-saga 实现此功能。动作创建者会 return 承诺进行异步 api 调用，并在完成后用结果解决。这可能看起来像这样：

// 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 这种方法要尴尬得多。

在 onClick 函数中分派三个动作然后使用该响应映射数据是否同步

Is it synchronous to dispatch three actions inside a onClick functions and then map the data using that reponses

javascript

xlsx

reactjs

redux-saga