redux-saga/effects#delay TypeScript Examples

function* busyPollBackendState(): SagaIterator {
  let state: BackendState = "NOT_STARTED"; // Maybe select from store?
  while (state === "NOT_STARTED" || state === "LOADING") {
    const newState: BackendState = yield call(fetchStatus);
    if (newState !== state) {
      yield put(stateChanged(newState));
      state = newState;
    }
    yield delay(BACKEND_STATE_BUSY_POLL_DURATION_IN_MS);
  }
}

/**
 * Github repos request/response handler
 */
export function* getRepos() {
  yield delay(500);
  // Select username from store
  const username: string = yield select(selectUsername);
  if (username.length === 0) {
    yield put(actions.repoError(RepoErrorType.USERNAME_EMPTY));
    return;
  }
  const requestURL = `https://api.github.com/users/${username}/repos?type=all&sort=updated`;

  try {
    // Call our request helper (see 'utils/request')
    const repos: Repo[] = yield call(request, requestURL);
    if (repos?.length > 0) {
      yield put(actions.reposLoaded(repos));
    } else {
      yield put(actions.repoError(RepoErrorType.USER_HAS_NO_REPO));
    }
  } catch (err: any) {
    if (err.response?.status === 404) {
      yield put(actions.repoError(RepoErrorType.USER_NOT_FOUND));
    } else if (err.message === 'Failed to fetch') {
      yield put(actions.repoError(RepoErrorType.GITHUB_RATE_LIMIT));
    } else {
      yield put(actions.repoError(RepoErrorType.RESPONSE_ERROR));
    }
  }
}

function* showSuccessMessageSaga() {
  yield takeEvery(actionTypes.SHOW_SUCCESS_MESSAGE, function* _() {
    yield delay(3000);
    yield put({ type: actionTypes.CLOSE_SUCCESS_MESSAGE });
  });
}

function* showErrorMessageSaga() {
  yield takeEvery(actionTypes.SHOW_ERROR_MESSAGE, function* _() {
    yield delay(3000);
    yield put({ type: actionTypes.CLOSE_ERROR_MESSAGE });
  });
}

export function* updateHash() {
  let hash = initialState;
  while (true) {
    hash = yield call(workerApi.findHash, hash, "0000");
    yield put(actions.update(hash));
    yield delay(1000);
  }
}

// Sagas
function* checkSetupSaga(
  action: ReturnType<typeof checkSimulatorSetupCreator.request>
) {
  try {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const { data: setupStatus }: { data: SimulatorCheckResponse } = yield call(
      checkSimulatorSetup
    );

    // All the backend checks are ok ask for the frontend Iframe check
    if ("ok" === setupStatus.manifest && "ok" === setupStatus.dependencies) {
      yield put(
        checkSimulatorSetupCreator.success({
          setupStatus: { iframe: null, ...setupStatus },
        })
      );
      yield put(connectToSimulatorIframeCreator.request());
      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
      const {
        timeout,
        iframeCheckKO,
        iframeCheckOk,
      }: {
        iframeCheckOk: ReturnType<
          typeof connectToSimulatorIframeCreator.success
        >;
        iframeCheckKO: ReturnType<
          typeof connectToSimulatorIframeCreator.failure
        >;
        timeout: CallEffect<true>;
      } = yield race({
        iframeCheckOk: take(getType(connectToSimulatorIframeCreator.success)),
        iframeCheckKO: take(getType(connectToSimulatorIframeCreator.failure)),
        timeout: delay(10000),
      });

      if (iframeCheckOk && action.payload.callback) {
        action.payload.callback();
        return;
      }

      if (timeout) {
        yield put(connectToSimulatorIframeCreator.failure());
        yield call(failCheckSetupSaga);
        return;
      }

      if (iframeCheckKO) {
        yield call(failCheckSetupSaga);
        return;
      }
      return;
    }

    // All the backend checks are ko and the request is coming from the "start"
    const isTheFirstTime =
      "ko" === setupStatus.manifest &&
      "ko" === setupStatus.dependencies &&
      action.payload.withFirstVisitCheck;

    if (isTheFirstTime) {
      yield put(openSetupDrawerCreator({}));
      return;
    }

    yield put(
      checkSimulatorSetupCreator.success({
        setupStatus: { iframe: null, ...setupStatus },
      })
    );
    yield call(failCheckSetupSaga);
  } catch (error) {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
    yield put(checkSimulatorSetupCreator.failure(error as Error));
  }
}

/**
 * A convenience utility to create a wrapped saga that handles common concerns like
 * trigger watching, cancel watching, timeout, progress updates, and success/fail updates.
 * Use to create complex sagas that need more coordination with the UI.
 * Note: the wrapped saga and reducer this returns must be added to rootSaga.ts
 */
export function createMonitoredSaga<SagaParams = void>(
  saga: (params: SagaParams) => any,
  name: string,
  options?: MonitoredSagaOptions
) {
  const triggerAction = createAction<SagaParams>(`${name}/trigger`)
  const cancelAction = createAction<void>(`${name}/cancel`)
  const statusAction = createAction<SagaStatus>(`${name}/progress`)
  const errorAction = createAction<string>(`${name}/error`)
  const resetAction = createAction<void>(`${name}/reset`)

  const reducer = createReducer<SagaState>({ status: null, error: null }, (builder) =>
    builder
      .addCase(statusAction, (state, action) => {
        state.status = action.payload
        state.error = null
      })
      .addCase(errorAction, (state, action) => {
        state.status = SagaStatus.Failure
        state.error = action.payload
      })
      .addCase(resetAction, (state) => {
        state.status = null
        state.error = null
      })
  )

  const wrappedSaga = function* () {
    while (true) {
      try {
        const trigger: Effect = yield take(triggerAction.type)
        logger.debug(`${name} triggered`)
        yield put(statusAction(SagaStatus.Started))
        const { result, cancel, timeout } = yield race({
          // Note: Use fork here instead if parallelism is required for the saga
          result: call(saga, trigger.payload),
          cancel: take(cancelAction.type),
          timeout: delay(options?.timeoutDuration || DEFAULT_TIMEOUT),
        })

        if (cancel) {
          logger.debug(`${name} canceled`)
          yield put(errorAction('Action was cancelled.'))
          continue
        }

        if (timeout) {
          logger.warn(`${name} timed out`)
          yield put(errorAction('Action timed out.'))
          continue
        }

        if (result === false) {
          logger.warn(`${name} returned failure result`)
          yield put(errorAction('Action returned failure result.'))
          continue
        }

        yield put(statusAction(SagaStatus.Success))
        logger.debug(`${name} finished`)
      } catch (error: any) {
        logger.error(`${name} error`, error)
        yield put(errorAction(errorToString(error)))
      }
    }
  }

  return {
    name,
    wrappedSaga,
    reducer,
    actions: {
      trigger: triggerAction,
      cancel: cancelAction,
      progress: statusAction,
      error: errorAction,
      reset: resetAction,
    },
  }
}