NGRX：调度预期一个对象

Question

在我的行动中，我有：

export const GetSwivlr = createAction(
  GET_SWIVLR,
  props<{ payload: Swivlr[] }>()
);......

在我的还原器中，我有：

export const reducer = createReducer(
  initialState,
  on(SwivlrActions.AddSwivlr, (state, { payload }) => {
    return adapter.addOne(payload, state)
  }),
  on(SwivlrActions.RemoveSwivlr, (state, { payload }) => {
    return adapter.removeOne(payload, state)
  }),
  on(SwivlrActions.GetSwivlr, (state, { payload }) => {
    return adapter.setAll(payload, state)
  })
);

在我的效果中，

export class SwivlrEffects {
  constructor(private crudService: CrudService,
    private readonly actions$: Actions
  ) { }

  public readonly getSwivlr$ = createEffect(() => 
     this.actions$.pipe(ofType(GetSwivlr),
      mergeMap(() => this.crudService.getAll<Swivlr[]>('endpointAddress').pipe(
        map(swivlr => ({ type: GET_SWIVLR, payload: swivlr})))),
      catchError((error: string | null) =>
         of(FailSwivlr))
    )
  );
}

我最初被宣布为函数，而不是const，而我又将每个行为归还为一个动作，而不是创造。

将调度程序与我的动作称为函数，在我这样做时并没有引起任何错误：

this.store.dispatch({ type: GET_SWIVLR });

但是现在确实如此，我认为我只需要更改呼叫的呼叫：

this.store.dispatch(GetSwivlr());

但是，此const有一个附加道具。我认为这是在成功打电话给我的API之后，我的效果将从我的效果中得到填充。

有人可以建议我如何更改这个电话吗？

我收到第一个错误：

错误：效果“ swivlreffects.getswivlr $”派遣为无效的动作： 未定义

第二个错误：

TypeError：调度期望对象，而是收到了一个 功能。

要详细说明@antons在我的组件中回答：我现在有：

....
 tiles$: Observable<Swivlr[]> = this.store.select(state => state.tiles);

  returnval: Swivlr[];

  constructor(private store: Store<{tiles: Swivlr[] }>) {
    this.returnval = [];
  }

  ngOnInit() {
    this.store.dispatch(GetSwivlr({ payload: this.returnval }));
    }
....

Answer 1

正如您在此处宣布的那样：

export const GetSwivlr = createAction(
  GET_SWIVLR,
  props<{ payload: Swivlr[] }>()
);

您必须为您的操作提供有效载荷并这样派遣：

this.store.dispatch(GetSwivlr({ payload: `here is your object with type Swivlr[]` }));

Answer 2

在您的效果中，您不会在完成时派遣适当的措施。将操作更改为createAction版本时，您可能没有将其更新。下面的代码中的括号可能会弄乱 - 请警告。

它还应该是setSwivlr（{有效载荷：swivlr}）？

getSwivlr$ = createEffect(() => 
    this.actions$.pipe(
        ofType(GetSwivlr),
        mergeMap(() => this.crudService.getAll<Swivlr[]>('endpointAddress').pipe(
          map(swivlr => GetSwivlr({ payload: swivlr })))), // <-- here
          catchError((error: string | null) => of(FailSwivlr))
    )
  );
}

另一个说明，从商店中选择时，您应该使用 ngrx.io/guide/store/store/selectors 而不是在组件中进行this.store.select（state =＆gt; state.tiles）。