从 - "createAction" 函数获取类型

Question

创建ngrx操作有两种方法。一种是定义一个实现Action类的新类；createAction"；作用有没有一种方法可以对使用"；createAction"；方法

例如，如果我有以下操作：

export const getWorker = createAction(
'[Worker Api] Get Worker',
props<{ workerId: number }>()
);

我想让workerId产生一种效果，它可以监听该操作：

getWorker$ = createEffect(() => {
return this.actions$.pipe(
ofType(WeatherApiActions.getWorker),
switchMap((action: { type: string, workerId: number }) => this.workerService.getWorker(action.workerId)),
map((worker: IWorker) => WeatherApiActions.getWorkerSuccess({ worker }))
)})

和你一样，我不得不自己写打字。这使得效果与动作紧密相连，这是一个巨大的缺点。所以我的问题是：我是否必须使用创建操作的第一种方法才能进行操作有效载荷的打字？

Answer 1

当我想分享我的效果内部的一些代码并找到它时，我确实需要它。

你的问题的答案是，不。你可以用一个简单的代码获得Action类型。

使用ReturnType实用程序类型，可以从createAction创建的函数中提取Action类型。

创建如下操作后，

const getWorker = createAction(
'[Worker Api] Get Worker',
props<{ workerId: number }>()
);

ReturnType<typeof getWorker>导致类型{ workerId: number } & TypedAction<'[Worker Api] Get Worker'>。

如果您查看库中ofType运算符函数的声明代码，您会发现它也使用了ReturnType实用程序。

Answer 2

我对ng/ngrx之类的东西还比较陌生，但使用create*helper方法的部分原因似乎是为了获得更好的类型支持。我也有同样的问题，我的一个影响来自于这个：

authSignup = this.actions$.pipe(
ofType(AuthActions.SIGNUP_START),
switchMap((signupAction: AuthActions.SignupStart) => {
return this.http.post<AuthResponseData>(
...

对此：

authSignup = createEffect(() =>
this.actions$.pipe(
ofType(AuthActions.signupStart),
switchMap(({ email, password }) => {
return this.http
.post<AuthResponseData>(
...

动作看起来像：

export const signupStart = createAction(
"[Auth] Signup Start",
props<{ email: string; password: string }>()
);

我花了一点时间才弄明白这一点；switchMap现在知道动作的道具是什么。而且，至少在最新的VSCode中，我在输入参数时得到了IntelliSense的帮助。