如何等待传奇完成调用api来执行下一个功能?

时间:2019-04-15 14:23:43

标签: reactjs react-redux redux-saga

我对使用Sagas有疑问。

我有一个按钮,当单击该按钮时,它会触发一个调用动作的函数:

Component.js

  onClickChainIdentifier = (event) => {
     //action called
      this.props.getChains();

     //next function to be called
      this.teste();
    }
  }

Action.js

export function getChains(){
  return {
    type: GET_CHAINS,
  }
}

在分派此操作后,它会触发一个常量GET_CHAINS,它调用一个传奇:

Saga.js

export function* getAllChains() {
  const requestURL = process.env.PATH_API.GET_CHAINS;

  try {
    const response = yield call(requestGet, requestURL);
    yield put(getChainsSuccess(response));
  } catch (err) {
    yield put(getChainsError(err));
  }
}


export default function* sagasApp() {

yield [
    fork( takeLatest, GET_CHAINS, getAllChains ),
  ]
}

我希望在api返回(成功或错误)之后,我可以调用组件内部的 this.teste 函数。 我如何做到这一点?

预先感谢您的帮助。

3 个答案:

答案 0 :(得分:1)

您可以使用标志来控制何时以及是否应该渲染组件。这是一种常见的解决方案,用于呈现后备UI(例如,微调框或文本),以等待异步进程(传奇,thunk,API服务等)完成并且组件具有呈现其自身所需的全部内容。 / p>

检查我发布的解决方案here,您可以访问此CodeSandBox,其中显示了如何使用标志来解决它。

答案 1 :(得分:1)

您可以将回调传递给getAllChains函数:

onClickChainIdentifier = (event) => {
   this.props.getChains(() => {
      this.teste();
   });
}


export function* getAllChains(callback) {
  const requestURL = process.env.PATH_API.GET_CHAINS;

  try {
    const response = yield call(requestGet, requestURL);
    yield put(getChainsSuccess(response));
    if (callback) { 
      callback(); 
    }
  } catch (err) {
    yield put(getChainsError(err));
  }
}

答案 2 :(得分:0)

正如jank所指出的,您可以在lifecycle methods中测试组件的状态,并在满足某些条件时调用函数。例如,利用jank的示例:

componentDidUpdate (prevProps) {
  if (this.props.pending && !prevProps.pending) {
    this.props.test()
  }
}

每次test道具从pending更改为false时,都会呼叫truetest函数可能有副作用,例如从服务器获取或使用某些浏览器API。使用更新的Hooks API useEffect,可以实现相同的功能。