角度 15->16 更新后 Ngrx createEffect 类型错误

Question

我目前正在尝试从角度 15 -> 16 更新应用程序。 然而，随着 ngrx 中新类型的强制实施，我遇到了编译器错误，但我无法找到解决方案。

历史上我们有过

//Actions:
export const RESET_ORDER_IDENTIFIER = '[ServiceProvisioning] Reset order identifier';
export const RESET_ORDER_IDENTIFIER_SUCCESS = '[ServiceProvisioning] Reset order identifier success';

export const resetOrderIdentifier = createAction(RESET_ORDER_IDENTIFIER);
export const resetOrderIdentifierSuccess = createAction(RESET_ORDER_IDENTIFIER_SUCCESS, props<{ orderIdentifier: string}>());

//Effect:
  resetOrderIdentifier$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(ServiceProvisioningActions.resetOrderIdentifier),
      map(() => {
        //generateGUID() returns a random string (not an observable)
        return ServiceProvisioningActions.resetOrderIdentifierSuccess({orderIdentifier: this._utilsService.generateGUID()});
      })
    );
  });

这给出了错误

Argument type () => 
Observable<{orderIdentifier: string} & TypedAction<"[ServiceProvisioning] Reset order identifier success">> 
is not assignable to parameter type () => 
(Observable<{orderIdentifier: string} & TypedAction<"[ServiceProvisioning] Reset order identifier success">> & 
ConditionallyDisallowActionCreator<DispatchType<EffectConfig & 
{functional?: false}>, Observable<{orderIdentifier: string} & 
TypedAction<"[ServiceProvisioning] Reset order identifier success">>>)

另一个给我带来麻烦的 createEffect 是

//Actions:
export const SET_SELECTED_SERVICE_TYPE_ACTION = '[ServiceProvisioning] Set selected service type';
export const SET_SELECTED_SERVICE_TYPE_ACTION_SUCCESS = '[ServiceProvisioning] Set selected service type success';
export const setSelectedServiceType = createAction(SET_SELECTED_SERVICE_TYPE_ACTION, props<{ selectedServiceType: ServiceProvisioningState['selectedServiceType'] }>());
export const setSelectedServiceTypeSuccess = createAction(SET_SELECTED_SERVICE_TYPE_ACTION_SUCCESS, props<{ selectedServiceType }>());


//Effect:
  setSelectedServiceType$ = createEffect( () => {
    return this.actions$.pipe(
      ofType(ServiceProvisioningActions.setSelectedServiceType),
      switchMap( ({ selectedServiceType }) => {
        let pageTitle = selectedServiceType.includes('foo') ? 'foo bar' : 'bar';
        this._store.dispatch(ServiceProvisioningActions.setPageTitle({pageTitle}));
        return of (ServiceProvisioningActions.setSelectedServiceTypeSuccess({selectedServiceType}));
      })
    );
  });

给出类似的错误

Argument type () => 
Observable<{selectedServiceType} & TypedAction<"[ServiceProvisioning] Set selected service type success">> 
is not assignable to parameter type () => 
(Observable<{selectedServiceType} & TypedAction<"[ServiceProvisioning] Set selected service type success">> & 
ConditionallyDisallowActionCreator<DispatchType<EffectConfig & {functional?: false}>, Observable<{selectedServiceType} &
 TypedAction<"[ServiceProvisioning] Set selected service type success">>>) 

任何有关迁移文档的帮助，如果提到我找不到的这一点，或者这些函数的编写方式，我将不胜感激，干杯。 注意：我省略了减速器/状态，因为我认为问题与它们的设置方式无关，并且希望帖子能够切中要点，但如果需要可以添加

Answer 1

用返回 subs 数组替换第一个示例解决了我原来的问题

修复：

  resetOrderIdentifier$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(ServiceProvisioningActions.resetOrderIdentifier),
      switchMap(() => {
        const subs = [];
        subs.push(ServiceProvisioningActions.resetOrderIdentifierSuccess({orderIdentifier: this._utilsService.generateGUID()}));
        return subs;
      })
    );
  });

我们遇到的另一个常见问题是使用 concactFromLatest 时

之前我们有

savePlanSelectionFormValues$ = createEffect(() => {
  return this.actions$.pipe(
    ofType(ServiceProvisioningActions.savePlanSelectionFormValues),
    concatLatestFrom((a: ServiceProvisioningState) => this._serviceProvisioningState.select(selectServiceProvisioningState)),
    switchMap(([ { planSelectionFormValues }, serviceProvisioningState ]) => {.....

现在是

  savePlanSelectionFormValues$ = createEffect(() => {
    return this.actions$.pipe(
        ofType(ServiceProvisioningActions.savePlanSelectionFormValues),
        exhaustMap(({planSelectionFormValues}) => {
          this._serviceProvisioningState.select(selectServiceProvisioningState).pipe(
            map((serviceProvisioningState) => {

我会将其标记为已解决，但如果某些内容看起来不正确/最佳实践，请告诉我。