NGRX如何在HTTP呼叫生效之前派遣操作

Question

我是NGRX /反应性模式的新手。我正在尝试重新设计我们从模板驱动的方法（使用组件驱动模型）中具有的一些复杂形式，以使用NGRX进行反应性形式。

由于我们的API的编写方式，在将请求发布到服务器之前，需要操纵表单中的某些数据。 在我的旧设计中，这是一个有些复杂的功能，我必须用大量条件编写，但是由于所有内容都直接与组件本身绑定，所以这是进行数据操作的直接方法，然后

立即 订阅端点我试图将NGRX和NGX Formally用于表单，因此我不必具有多个组件和一吨混乱的代码，但是我仍然需要在数据登录之前操纵数据，端点

有办法NGRX效果对我来说是在HTTP调用之前派遣动作的？

我仍在学习ngrx，所以只知道基本呼叫，但基本上，需要知道如何使表单提交派遣措施首先调用还原行动以更改状态，然后在状态已更新，调用效果将数据发送到端点，

这是我试图创建的还原函数，

export const submitToRmv = (state: RmvServicesState, action) => {
    let vehicleArray = [...state.rmvData.rmvServicesUserEnteredData.vehicles];
    const transactionType = state.rmvData.transactionType;
    if (transactionType === 'PrefillRegistrationTransfer' || vehicleArray[0].reassignedPlate === 'Y') {
      const newVeh = {
        // modified codehere ... 
      };
      vehicleArray.push(newVeh);
      vehicleArray[0].plateNumber = '';
      vehicleArray[0].plateType = '';
    }
    vehicleArray = [...vehicleArray, ...state.rmvData.rmvServicesUserEnteredData.tradeInVehicles];

    const newTransactionType = transactionType === 'PrefillNewTitleAndRegistration' || transactionType === 'PrefillRegistrationTransfer' &&
    vehicleArray[0].reassignedPlate === 'Y' ? 'Reassign' : transactionType.replace('Prefill', '');

    return {
      ...state,
      rmvData: {
        ...state.rmvData,
        transactionType: newTransactionType,
        rmvServicesUserEnteredData: {
          ...state.rmvData.rmvServicesUserEnteredData,
          vehicles: vehicleArray,
        },
      },
    };

  };

我创建了一组操作

export const validationSubmission = createAction(
'[Rmv Prefill Api] Rmv Validation Submission',
props<{getReadyRequest: RmvServicesData }>()

）；

export const validationResponse = createAction(
    '[Rmv Prefill Api] Rmv Validation Response',
    props<{response: RmvValidationResponse }>()
);

我的效果是以我的形式触发该操作

  rmvSubmit$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(RmvPrefillActions.validationSubmission),
      mergeMap((value) =>
      this.rmvService.getReadySubmit(value.getReadyRequest)
      .pipe(map(res => RmvPrefillActions.validationResponse({response: res}))
      )
    ));
  });

，我要派遣该动作，我希望发生的事情是使还原器函数执行代码以操纵数据，然后以某种方式（一旦完成），然后触发该代码影响 在我的测试中，看起来效果首先是触发的，因为发布到我的API的值是未修改的数据，然后当我查看Redux Dev工具时，我确实看到我的值已经改变，因此Reducer正在工作，只是我不想顺序

Answer 1

是的，您需要执行单独的操作：

这是样式，我喜欢在：

export enum FormSubmissionTypes = {
GET_PRE_FORM_DATA = '[Rmv Prefill Api] pre form data',
GET_PRE_FORM_DATA_SUCCESS = '[Rmv Prefill Api] pre form data success',
DO_SOMETHING_WITH_DATA = '[Rmv Prefill Api] do something with data',
DO_SOMETHING_WITH_DATA_SUCCESS = ' do something with data success'
}

export const getData = createAction(
    FormSubmissionTypes.GET_PRE_FORM_DATA,
    props<{getReadyRequest: RmvServicesDataParams }>()
);

export const getDataSuccess = createAction(
    FormSubmissionTypes.GET_PRE_FORM_DATA_SUCCESS,
    props<{getReadyRequestResponse: RmvServicesDataResponse }>()
);

export const doSomething = createAction(
    FormSubmissionTypes.DO_SOMETHING_WITH_DATA,
    props<{getReadyRequest: RmvServicesDataResponse }>()
);

getData$ = createEffect(
    (): Observable<any> =>
      this.actions$.pipe(
        ofType(FormSubmissionTypes.GET_PRE_FORM_DATA),
        map((action: { getReadyRequest: RmvServicesDataParams }) => action.getReadyRequest),
        switchMap((getReadyRequest) =>
          this.service.fetchData(getReadyRequest).pipe(
            take(1),
            map((data: RmvServicesDataResponse[]) => getDataSuccess({getReadyRequestResponse:data }), doSomething({getReadyRequestResponse:data})
        )
      )
  );

现在您创建一个效果来应对“ Dosomething”动作的成功，当动作发射并发射操作时，还原器将对应效果对它们做出反应。如果您可以创建一个stackblitz，我很乐意为您编辑代码，以便在此结构中使用。