Question

我有以下行动：

export function createRequest(inputValues) {
  return {
    type: actions.PERSON_CREATE_REQUEST,
    payload: {
      inputValues
    }
  };
}

export function createSuccess(person) {
  return {
    type: actions.PERSON_CREATE_SUCCESS,
    payload: {
      person: person
    }
  };
}

export function createFailure(error) {
  return {
    type: actions.PERSON_CREATE_FAILURE,
    payload: {
      error
    }
  };
}

佐贺：

export function* createPerson(action) {
  try {
    const data = yield call((async () => {
      const person = action.payload.inputValues;
      return await api.post(person);
    }));
     yield put(createSuccess(data));
  } catch (error) {
    yield put(createFailure(error));
  }
}


export function* watchCreatePerson() {
  yield takeEvery('PERSON_CREATE_REQUEST', createPerson);
}

export function* rootSaga() {
  yield [
    fork(watchCreatePerson),
  ];
}

在表单提交上调用的函数：

handleSubmit = async (event, values) => {
    event.preventDefault();
      await store.dispatch(action.createRequest(values));
      if (this.props.error === null) {
        store.dispatch(reset(this.props.form));
      }
  };

await store.dispatch(action.createRequest(values));之后我想检查是否已发送PERSON_CREATE_FAILURE或PERSON_CREATE_SUCCESS。在PERSON_CREATE_FAILURE我在商店中设置error映射到道具。但是在调度if之后调用带有PERSON_CREATE_REQUEST的下一行代码。但我需要等到PERSON_CREATE_FAILURE或PERSON_CREATE_SUCCESS发送。如何更改saga以等待该操作发送？

Answer 1

在handleSubmit功能中，只需发送createRequest操作，不要在代码中等待它的响应。

现在，如果请求失败，请编写一个reducer来处理PERSON_CREATE_FAILURE操作。在此缩减器中，您可以适当地设置应用程序状态，即重置表单状态。然后使用MapStateToProps作为包含表单的组件，表单将自动重新呈现以匹配更新的（在本例中为重置）表单状态。

请注意，使用此方法，您需要在Redux商店中创建表单的状态，但这样做会简化应用程序的状态生命周期。

如何在redux-saga中等待所有操作（请求后成功/失败）？

1 个答案: