Как ждать саги, чтобы завершить вызов API для выполнения следующей функции?

Question

У меня вопрос по поводу использования саг.

У меня есть кнопка, при нажатии которой запускается функция, вызывающая действие:

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 , которая находится внутри компонента. Как мне это сделать?

Заранее спасибо за помощь.

Answer 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));
  }
}

Answer 2

Вы можете использовать флаги, чтобы контролировать, когда и если ваши компоненты должны отображаться. Это обычное решение для рендеринга резервного интерфейса (например, спиннер или текст), чтобы дождаться завершения асинхронного процесса (саги, thunk, API-службы и т. Д.) И у компонента есть все, что ему нужно для визуализации.

Проверьте решение, которое я выложил здесь , вы можете посетить этот CodeSandBox , который показывает, как вы можете использовать флаги для его решения.

Answer 3

Как указал Джанк, вы можете проверить состояние компонента в методах жизненного цикла и вызвать функцию, когда какое-либо условие выполнено. Например, используя пример Джанка:

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

Будет вызывать test каждый раз, когда значение pending изменяется с false на true. Функция test может иметь побочные эффекты, такие как выборка с сервера или использование какого-либо браузера API. Та же функциональность может быть достигнута с использованием более нового useEffect API-интерфейса Hooks.