如何等待 saga 完成调用 api 以执行下一个函数？

Question

我对 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：

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 return（成功或错误）之后，我可以调用 this.teste 函数在组件内部。我该如何做到这一点？

在此先感谢您的帮助。

Answer 1

您可以使用标志来控制组件何时以及是否应该呈现。这是渲染回退 UI（例如：微调器或文本）以等待异步进程（saga、thunk、API 服务等）完成并且组件已完成的常见解决方案它需要渲染自己。

查看我发布的解决方案 here, you can visit this CodeSandBox，其中显示了如何使用标志来解决它。

Answer 2

您可以将回调传递给您的 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));
  }
}

Answer 3

正如 jank 指出的那样，您可以在 lifecycle methods 中测试组件的状态，并在某些条件为真时调用函数。例如利用 jank 的例子：

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

每次 pending 道具从 false 更改为 true 时都会调用 test。 test 函数可能会产生副作用，例如从服务器获取数据或使用某些浏览器 API。使用 Hooks API.

的更新 useEffect 可以实现相同的功能

如何等待 saga 完成调用 api 以执行下一个函数？

How to wait for a saga to finish calling an api to execute a next function?

reactjs

redux-saga

react-redux