使用 redux saga actionChannel 无法对操作进行排序

Question

我们有多个自定义 React 文件输入组件（假设有 4 个不同的输入文件部分）。需要为每个组件上传文件，内部触发操作并调用 api 调用将文件上传到服务器。

所以这里的问题是所有文件上传的 api 调用都是相同的。我们需要对操作进行排序（第一个文件上传操作解析第一个和第二个，依此类推），以便所有 api 都将按顺序执行（根据我们的项目要求，我们需要将一个 API 响应标头 xsrf 令牌作为请求标头传递给下一个调用 api ）。

这是我尝试过的代码。

import { take, actionChannel, call, put, fork, takeEvery, takeLatest } from 'redux-saga/effects';
import { AnyAction } from 'redux';
import { ServicesType } from '../services/types';
import { uploadLossOfAccountMaleSuccess, uploadLossOfAccountFemaleSuccess fetchDataFailure, UploadExistingAccountMaleSuccess,  UploadExistingAccountFemaleSuccess} from './actions';
import {UPLOAD_ACCOUNT_LOSS_REQUEST_MALE, UPLOAD_ACCOUNT_LOSS_REQUEST_FEMALE, UPLOAD_ACCOUNT_EXIST_REQUEST_MALE, UPLOAD_ACCOUNT_EXIST_REQUEST_FEMALE} from './actionTypes';

// services are written for making an axios api calls
type Services = Pick<ServicesType, 'FileUpload'>;

function uploadLossOfAccount(services: Services, gender: string) {
  return function* (action: AnyAction) {
  try {
     //postData is function which makes an axios call
    const data = yield call(services.FileUpload.postData, action.payload);
    
    gender=="male"?yield put(uploadLossOfAccountMaleSuccess(data)): yield put(uploadLossOfAccountFemaleSuccess(data));

  } catch (error) {
    // Dispatch failure action
    yield put(fetchDataFailure(error.message));
  }
}

function UploadExistingAccount(services: Services, gender: string) {
  return function* (action: AnyAction) {
  try {
   //postData is a function that makes an axios call
   const data= yield call(services.FileUpload.postData, action.payload);

    
   gender=="male"? yield put(UploadExistingAccountMaleSuccess(data)): yield put(UploadExistingAccountFemaleSuccess(data));

  } catch (error) {
    // Handle error if needed
  }
}


//sequencing actions
**function* watchRequests(services:Services) {
  // Create an action channel for actions
  const requestChannel = yield actionChannel([UPLOAD_ACCOUNT_LOSS_REQUEST_MALE, UPLOAD_ACCOUNT_LOSS_REQUEST_FEMALE, UPLOAD_ACCOUNT_EXIST_REQUEST_MALE, UPLOAD_ACCOUNT_EXIST_REQUEST_FEMALE]);

  while (true) {
    // Take the next action from the channel
    const action = yield take(requestChannel);
 
    switch (action.type) {
      case UPLOAD_ACCOUNT_LOSS_REQUEST_MALE:
        yield call(uploadLossOfAccount, services, "male");
        break;
      case UPLOAD_ACCOUNT_LOSS_REQUEST_FEMALE:
        yield call(uploadLossOfAccount, services, "female");
        break;
      case UPLOAD_ACCOUNT_EXIST_REQUEST_MALE:
        yield call(UploadExistingAccount, services, "male");
        break;
      case UPLOAD_ACCOUNT_EXIST_REQUEST_FEMALE:
        yield call(UploadExistingAccount, services, "female");
        break;
     //other actions
    }
  }
}**

function* fileUploadSaga(services:Services):any{
return [yield watchRequests(services]
}
export default fileUploadSaga

rootSaga.js
export default function* rootSaga() {
 const totalSagas=[...fileUploadSaga, ...remainingSagas]
yield all(totalSagas);
}

我怀疑fileuploadSaga函数有问题。 API 调用它自身并不是通过上面的代码进行的。请提出任何更改建议以使其正常工作。我无法找出我在哪里犯了错误。在这种情况下，请帮助使所有操作按顺序执行。

Answer 1

尝试修改 watchRequests 生成器函数，如下所示。并从 fileUpload 传奇中删除 return 语句。可能会起作用。

function* watchRequests(services: Services) {
  // Create an action channel for actions
  const requestChannel = yield actionChannel([
    UPLOAD_ACCOUNT_LOSS_REQUEST_MALE,
    UPLOAD_ACCOUNT_LOSS_REQUEST_FEMALE,
    UPLOAD_ACCOUNT_EXIST_REQUEST_MALE,
    UPLOAD_ACCOUNT_EXIST_REQUEST_FEMALE,
  ]);

  while (true) {
    // Take the next action from the channel
    const action: AnyAction = yield take(requestChannel);

    switch (action.type) {
      case UPLOAD_ACCOUNT_LOSS_REQUEST_MALE:
        yield call(uploadLossOfAccount(services, 'male'), action);
        break;
      case UPLOAD_ACCOUNT_LOSS_REQUEST_FEMALE:
        yield call(uploadLossOfAccount(services, 'female'), action);
        break;
      case UPLOAD_ACCOUNT_EXIST_REQUEST_MALE:
        yield call(UploadExistingAccount(services, 'male'), action);
        break;
      case UPLOAD_ACCOUNT_EXIST_REQUEST_FEMALE:
        yield call(UploadExistingAccount(services, 'female'), action);
        break;
      // other actions
    }
  }
}

function* fileUploadSaga(services: Services): any {
  yield fork(watchRequests, services);
}

export default fileUploadSaga;