Question

我们有一个通用的Form组件，并附有一个传奇来处理验证和提交

function* validateAndSubmit(action) {
    const errors = clientSideValidate(action.values);
    if (errors) {
        return yield put({type: SUBMIT_FAILED, formKey: action.formKey, errors: errors});
    }

    try {
        const response = yield call(submitToTargetUrl(action.values, action.url));
        if (response.errors) {
            return yield put({type: SUBMIT_FAILED, formKey: action.formKey, errors: response.errors});
        }

        yield put({type: SUBMIT_SUCCESS, formKey: action.formKey});
    } catch (e) {
        yield put({type: SUBMIT_FAILED, formKey: action.formKey, errors: [e.message]});
    }
}

function* form() {
    yield takeEvery(SUBMITTED, validateAndSubmit);
}

现在，我们有了另一个组件，例如UserForm，它包装了常规Form组件。在提交时，我们希望将表单提交到后端，并发地从外部API获取一些数据，等待两者完成，然后分派一些操作。此逻辑将存在于其他文件中的另一个Saga中。重用validateAndSubmit逻辑的正确模式是什么？有什么方法可以做到这一点：

function* handleUserFormSubmit(action) {
    const [submitResult, fetchResult] = yield all([
        call(validateAndSubmitSaga),
        call(fetchOtherData),
    ]);

    // ...test for successful results for both

    if (allIsGood) {
        yield put({type: ALL_IS_GOOD});
    }
}

function* userForm() {
    yield takeEvery(USER_FORM_SUBMITTED, handleUserFormSubmit);
}

谢谢！

Answer 1

我建议创建一个可重用的validateAndSubmit函数来处理验证和提交，然后返回一个错误（如果有）。然后，使用此功能的表单提交传奇效果。

async function reusableValidateAndSubmit(formValues, submitUrl) {
  try {
    const errors = clientSideValidate(formValues);
    if (errors) {
      return errors;
    }

    const response = await submitToTargetUrl(formValues, submitUrl);
    if (response.errors) {
      return response.errors;
    }

    return null;

  } catch (e) {
    console.error('@reusableValidateAndSubmit: ', e);
    return [e.message];
  }
}


function* handleFormSubmitSaga(action) {
  try {
    const { values, url, formKey } = action;
    const errors = yield call(reusableValidateAndSubmit, values, url);

    if (errors) {
      return yield put({type: SUBMIT_FAILED, formKey: formKey, errors: errors});
    }

    return yield put({type: SUBMIT_SUCCESS, formKey: formKey});  

  } catch (e) {
    return yield put({type: SUBMIT_FAILED, formKey: action.formKey, errors: [e.message]});
  }
}


function* form() {
  yield takeEvery(SUBMITTED, handleFormSubmitSaga);
}

对于handleUserFormSubmit，我不确定是否在您的用例中是否希望validateAndSubmitSaga失败时使fetchOtherData失败，反之亦然。使用redux-saga的all（）会带来这种效果，就像它的行为Promise.all()一样。

有关来自MDN的Promise.all()返回值的摘要：

当给定iterable中的所有promise已解决，或者任何promise被拒绝时，此返回的promise随后将被异步解析/拒绝（堆栈为空时）。

应该是您的预期行为，并且已经实现了上面的代码。您可以重复使用reusableValidateAndSubmit函数

function* handleUserFormSubmit(action) {
  const [submitError, fetchResult] = yield all([
    call(reusableValidateAndSubmit, action.values, action.url),
    call(fetchOtherData),
  ]);

  // ...test for successful results for both
  // submitError is null if submit was a success
  // fetchResult must have a value or return true if was a success
  if (!submitError && fetchResult) {
    yield put({type: ALL_IS_GOOD});
  }
}

我也可以建议您看看一些可以与redux合作的表单框架（例如redux-form），因为它们也可以在某些用例中提供帮助。

Answer 2

我们最终得到了一个略有不同的解决方案。而不是call-ing，我们是take-ing：

function* handleUserFormSubmit(action) {
    const [submitResult, fetchResult] = yield all([
        yield take(SUBMIT_SUCCESS),
        yield take(FETCH_OTHER_DATA_SUCCESS),
    ]);

    // ...test for successful results for both

    if (allIsGood) {
        yield put({type: ALL_IS_GOOD});
    }
}

function* userForm() {
    yield takeEvery(USER_FORM_SUBMITTED, handleUserFormSubmit);
}

这样，另一个传奇可以不受干扰地做事，这个传奇可以根据自己的逻辑做出反应

重用传奇逻辑

2 个答案: