Question

我的子组件中有这个executeOrder函数。这是直接调用API以这种方式从后端获取数据

const executeOrder = async (data, actions) => {
      value = await getToken(
        props.orderTotal
      );
      return value.ecToken;

  };

如您所见，我在await中使用了executeOrder函数。这样，它将等待执行完成，然后为我提供回报value.ecToken

由于我正在使用REACT，因此必须使用动作分派器并从Redux saga文件进行API调用。因此，我创建了一个动作分配器，并以此方式进行了API调用。

const executeOrder = (data, actions) => {
    props.initiateIdentity(props.orderTotal); //ACTION DISPATCHER
    console.log("2");
    return props.ecToken;
  };

现在我如何确保该动作分派器完成其执行？因为，我正在调度操作并进行API调用。 API调用的响应，即将其置于一种状态，然后通过mapStateToProps

将状态值从主要组件传递到子组件

在执行props.initiateIdentity(props.orderTotal)时，它会转到下一行return props.ecToen，由于API调用仍未提供此值，因此我得到一个空白值。

我如何确保此动作调度程序已完成其任务？有人请帮助我

PS-这是我的SAGA

function* initiateIdentity(action: TInitiateIdentPayPal) {
  try {
    const resp = yield call(
      getToken,
      orderTotal,
    );
    console.log("1");
    yield put(savePiBlob(resp));
  } catch (err) {
  } finally {
  }
}

Answer 1

在您的情况下，您必须创建一个动作的3个状态常量，并在saga文件的function *中获得响应。您的传奇函数应类似于：

const strokeWidth = 5;
const halfStroke = strokeWidth / 2;
const poly1 = new Konva.Line({
  points: [
    10 + halfStroke,
    10 + halfStroke,
    10 + halfStroke,
    50 - halfStroke,
    50 - halfStroke,
    50 - halfStroke,
    50 - halfStroke,
    10 + halfStroke
  ],
  fill: "#00D2FF",
  stroke: "black",
  strokeWidth: 5,
  closed: true
});

Answer 2

对不起，您无法那样实现。

在Redux的世界中，进行变异（通过分派动作）和获取最新状态是两种操作，并且永远不会混淆。 redux将以某种方式解决更新后的状态，但不能保证确切的时间段。

Answer 3

如果您将ecToken存储在您的redux存储中，则无需从executeOrder返回其值。相反，当您调用savePiBlob(resp)时，可以在化简器中更新ecToken。父级可以使用ecToken访问mapStateToProps。

或者，如果您确实想从子组件中返回ecToken，请使用componentDidUpdate检查ecToken是否已更新，然后通过调用父方法返回ecToken。

   componentDidUpdate(prevProps) {
      if (this.props.ecToken !==null && this.props.ecToken !== prevProps.ecToken) 
      {
        //call parent method here
      }
   }

我的if条件可能不准确。您可以添加适合自己的任何内容

onClick调度一个动作。我要如何等待派遣完成？

3 个答案: