我们有一个多个定制的Reaction文件输入组件(假设有4个不同的输入文件部分).需要为内部触发动作的每个组件上传文件,并调用API调用将文件上传到服务器.

所以这里的问题是所有文件上传的api调用都是一样的.我们需要对动作进行排序(第一个文件上传动作,第一个解析,第二个解析,等等),这样所有的api都将按顺序执行(根据我们的项目要求,我们需要将一个API响应头xsrf令牌作为请求头传递给下一个调用api).

以下是我try 过的代码.

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调用自身不是通过上述代码进行的.请提出任何更改,使其正常工作.我无法发现我在哪里犯了错误.请帮助在这种情况下,使所有的行动执行顺序.

推荐答案

try 修改WatchRequest生成器函数,如下所示.并从fileUpload传奇中删除返回语句.这可能会奏效.

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;

Typescript相关问答推荐

将对象属性路径描述为字符串数组的类型

调用另一个函数的函数的Typescript类型,参数相同

类型脚本类型字段组合

react 路由6操作未订阅从react 挂钩表单提交+也不使用RTK查询Mutations

在Reaction-Native-ReAnimated中不存在Animated.Value

一个打字类型可以实现一个接口吗?

AngularJS服务不会解析传入的Json响应到管道中的模型

如何过滤文字中的类对象联合类型?

如何连接属性名称和值?

TypeScrip-如何自动推断UNION变量的类型

声明遵循映射类型的接口

无法缩小深度嵌套对象props 的范围

编剧- Select 下拉框

如何实现允许扩展泛型函数参数的类型

如何在TypeScript类成员函数中使用筛选后的keyof this?

断言同级为true或抛出错误的Typescript函数

如何在TypeScript中声明逆变函数成员?

数据库中的表请求返回如下日期:2023-07-20T21:39:00.000Z 我需要将此数据格式化为 dd/MM/yyyy HH:mm

如何确定单元格中的块对 mat-h​​eader-cell 的粘附(粘性)?

redux-toolkit、createAsyncThunk 错误