Question

我已经使用Redux Saga开发了一个简单的CRUD应用程序已有几个月了，并且在某些情况下对代码的清洁度有一些担忧。假设该页面显示“提交订单”表单，成功提交后，用户将被重定向回索引页面，并且如果存在任何API验证错误，请将其映射到表单字段。

在promises的情况下，我有一个更简洁的函数API。成功和错误处理是独立的。我不需要将成功/错误处理的参数传递给其他函数。

class CreateOrderComponent extends React.Component {
    handleApiErrors = (errors) => {
        mapErrorsToFormik(errors, this.props.formProps);
    }

    handleApiSuccess = () => {
        const { businessId } = this.props;
        redirectTo('/businesses/' + businessId + '/index');
    }

    onFormSubmit = (orderFormValues) => {
       orderService.createOrder(orderFormValues)
         .then(this.handleApiSuccess)
         .error(this.handleApiErrors);
    }
}

我认为，函数API会因Redux Saga动作而变得更加混乱。如果有功能或更好的实现，我全神贯注。我的目标不是打击Redux，而只是寻找具有干净代码库的指南。我可以想到两种解决方案。

解决方案1：我不喜欢为成功和错误回调传递其他参数。其他参数（businessId和formProps）使createOrderAction的API变得混乱。

class CreateOrderComponent extends React.Component {
    onFormSubmit = (orderFormValues) => {
        const { businessId, formProps } = this.props;
        this.props.createOrderAction(orderFormValues, businessId, formProps);
    }
}

// saga.ts
function* createOrderActionSagaHandler(action) {
    const response = call(createOrder, action.payload.orderFormValues);

    if(response.statusCode === 200){
      const { businessId } = action.payload;
      redirectTo('/businesses/' + businessId + '/index');
    } else if (response.statusCode === 400){
      const { formProps } = action.payload;
      mapErrorsToFormik(errors, response.errors);
    }
}

解决方案2：我喜欢createOrderActionSagaHandler的更清洁的API，它只是表单的值，成功和错误回调都在其他地方处理。当组件最初安装（clearPreviousFormState）时，陷阱必须重置先前的状态，并且必须检查props中formSubmissionState中的更改。因此对我来说，每个函数都更简洁，但是此解决方案更为冗长。

class CreateOrderComponent extends React.Component {
    onComponentDidMount() {
      this.props.clearPreviousFormState();
    }

    onComponentDidUpdate(oldProps) {
        if(this.props.formSubmissionState === 'DONE') {
            if(this.props.apiResponse.statusCode === 200){
              this.handleApiSuccess();
            } else {
              this.handleApiErrors(this.props.apiResponse.errors);
            }
        }
    }

    handleApiErrors = (errors) => {
        mapErrorsToFormik(errors, this.props.formProps);
    }

    handleApiSuccess = () => {
        const { businessId } = this.props;
        redirectTo('/businesses/' + businessId + '/index');
    }

    onFormSubmit = (orderFormValues) => {
        const { businessId, formProps } = this.props;
        this.props.createOrderAction(orderFormValues);
    }
}

// saga.ts
function* createOrderActionSagaHandler(action) {
    const response = call(createOrder, action.payload.orderFormValues);

    if(response.statusCode === 200){
      yield put(apiSuccessResponseAction(response));
    } else if (response.statusCode === 400){
       yield put(apiErrorResonseAction(response));
    }
}

// reducer.ts
function createOrderPage(state, action){
    switch(action.type){
      case 'clearPreviousFormState':
         return {};
      default:
        return state;
    }
}

我还可以使用Redux Sagas分离成功回调和错误回调的其他方法吗？

关于Redux Saga与Promises的意见

0 个答案: