如何在超时的情况下调度Redux操作？_redux中的调度操作延迟_常量内的React Redux调度操作 - 腾讯云开发者社区

如何在超时的情况下调度Redux操作？

在处理Redux操作时，超时问题通常是指在某个异步操作（如API请求）完成之前，如果等待时间过长，我们希望采取一些措施，比如取消请求或者显示一个错误消息。以下是解决这个问题的几种方法：

基础概念

Redux Thunk: 允许你在action creators中编写异步逻辑。
Redux Saga: 使用ES6的Generator函数来管理应用程序的side effects（如异步操作）。
Redux Observable: 基于RxJS，用于处理复杂的异步流。

类型与应用场景

Thunk:
- 应用场景：简单的异步操作，如简单的API请求。
Saga:
- 应用场景：需要复杂控制流的异步操作，如多个API请求的协调。
Observable:
- 应用场景：需要处理复杂数据流的应用，如实时数据处理。

解决超时问题的方法

使用Redux Thunk

function fetchUser(timeout = 5000) {
  return (dispatch) => {
    const controller = new AbortController();
    const signal = controller.signal;

    const timeoutId = setTimeout(() => {
      controller.abort();
    }, timeout);

    fetch('/api/user', { signal })
      .then(response => response.json())
      .then(data => {
        clearTimeout(timeoutId);
        dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
      })
      .catch(error => {
        if (error.name === 'AbortError') {
          dispatch({ type: 'FETCH_USER_TIMEOUT' });
        } else {
          dispatch({ type: 'FETCH_USER_FAILURE', error });
        }
      });
  };
}

使用Redux Saga

import { call, put, takeLatest, race } from 'redux-saga/effects';

function* fetchUser(action) {
  try {
    const { response, timeout } = yield race({
      response: call(fetch, '/api/user'),
      timeout: delay(5000)
    });

    if (response) {
      const user = yield response.json();
      yield put({ type: 'FETCH_USER_SUCCESS', payload: user });
    } else {
      yield put({ type: 'FETCH_USER_TIMEOUT' });
    }
  } catch (error) {
    yield put({ type: 'FETCH_USER_FAILURE', error });
  }
}

function* watchFetchUser() {
  yield takeLatest('FETCH_USER_REQUEST', fetchUser);
}

使用Redux Observable

import { ofType } from 'redux-observable';
import { switchMap, timeout, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

const fetchUserEpic = (action$) => action$.pipe(
  ofType('FETCH_USER_REQUEST'),
  switchMap(() => 
    fetch('/api/user').then(response => response.json()).pipe(
      timeout(5000),
      catchError(error => of({ type: 'FETCH_USER_FAILURE', error }))
    )
  )
);