NgRx：如何声明动作创建者创建的动作的显式类型？

Question

在启动一个新应用程序并使用 NgRx 的新动作创建者模式后，我发现自己缺少一个明确的动作类型。例如，当我测试一项服务时，我想知道它是否发送了具有正确属性的正确操作。

如何在保持 TypeScript 类型安全的同时解决这个问题？

一个例子：

// What should the '???' in the following line be?
spyOn(store, "dispatch").and.callFake((action: ???) => {
  expect(action.type).toBe(fetchProductStructureAction.type);
  // TypeScript complains here if I don't add the correct type to action
  expect(action.property).toBe(expectedProperty); // <--
})

Answer 1

你可以从 ngrx/store.

放在那里 Action

这个肯定有效。

spyOn(store, 'dispatch').and.callFake((action: Action) => {
  expect(action).toEqual(jasmine.objectContaining({
    type: fetchProductStructureAction.type,
    property: expectedProperty,
  }));
});

如果你想在回调中保留原始类型，那么你需要将方法转换为 any，但是对于创建者函数来说，ReturnType 会带来这种情况。

spyOn(store, "dispatch" as any).and.callFake((action: MyActionCreatorFunction) => {
  expect(action.type).toBe(fetchProductStructureAction.type);
  expect(action.property).toBe(expectedProperty);
})

Answer 2

正如 Luis Aceitune 所提到的，这有效：

ReturnType<typeof myActionCreator>

示例：

export const loadDataAction = createAction('[Example] Load Data', props<{ id: string }>());

type LoadDataAction = ReturnType<typeof loadDataAction>;

NgRx：如何声明动作创建者创建的动作的显式类型？

NgRx: how do I declare the explicit type of an action created by action creator?

unit-testing

typescript

ngrx