为NGRX 11&#x2B中的创建方法传递的动作键入安全效果。
阅读了几个博客后,详细介绍了使用createAction
/createeefect
的用法和好处(比较经典@effect
and 实现操作
)这使IDE可以暗示从createAction
方法中键入而无需再次声明类型。
但是,如果我们需要在将其他可观察到的东西合并到流到流之前,需要明确声明,例如,将其他可观测值组合在一起怎么办?
例如(对于完整的createefect
,请参见下文),
this.actions$.pipe(ofType(FooActions.getFoo)).pipe(
withLatestFrom(bar$),
map(
([foo, bar]: [
ReturnType<typeof FooActions.getFoo>,
Bar[]
]) => {
...
return FooActions.loadFoo(...);
}
)
);
上面的示例显示了明确声明getfoo
操作的类型的需要。因为在添加第二个可观察的bar $
(省略的实现)时,有时我们需要知道 bar 的类型,以便于编程。
现在,在管道下的第一项键入无法省略,但是我们如何声明它?我的代码是否正确复制动作创建功能名称并添加 typeof ,然后由 returnType 包裹? (returnType&lt; typeof fooactions.getFoo&gt;
)
它看起来很矮胖,反图案一目了然。
进一步的想法是,我们如何声明创建效果类型(onloadfoobar $
)?
const onLoadFooBar$ = createEffect(() => {
return this.actions$.pipe(ofType(FooActions.getFoo)).pipe(
withLatestFrom(bar$),
map(
([foo, bar]: [
ReturnType<typeof FooActions.getFoo>,
Bar[]
]) => {
...
return FooActions.loadFoo(...);
}
)
);
});
是onloadfoobar $:returnType&lt; typeof fooactions.loadfoo&gt; = createefect(()=&gt; {
我找到了union
方法包装了returnType,但它被扩展到比我在这个地方需要的打字更多。
After reading several blogs details the usage and benefits of using createAction
/createEffect
(compare to classic @Effect
and implements Action
) which enables IDE to imply typing from the createAction
method without declaring types again.
But what if we need to explicitly declare e.g. while combining other observables before pipe down to the stream?
For example (for full createEffect
, see below),
this.actions$.pipe(ofType(FooActions.getFoo)).pipe(
withLatestFrom(bar$),
map(
([foo, bar]: [
ReturnType<typeof FooActions.getFoo>,
Bar[]
]) => {
...
return FooActions.loadFoo(...);
}
)
);
Example above shows the need of explicitly declare the type of getFoo
action. Since when adding the second observable bar$
(implementation omitted) to the tuple sometimes we need to know the type of bar for convenience of programming.
Now, the typing of first item down the pipe couldn't be omitted, but how we are able to declare it? Is my code correct to copy the action creation function name and adding typeof, then wrapped by a ReturnType? (ReturnType<typeof FooActions.getFoo>
)
It looks chunky and anti-pattern at a glance in this way.
Further thinking is, how we declare the created Effect type (onLoadFooBar$
)?
const onLoadFooBar$ = createEffect(() => {
return this.actions$.pipe(ofType(FooActions.getFoo)).pipe(
withLatestFrom(bar$),
map(
([foo, bar]: [
ReturnType<typeof FooActions.getFoo>,
Bar[]
]) => {
...
return FooActions.loadFoo(...);
}
)
);
});
Is it to be onLoadFooBar$: ReturnType<typeof FooActions.loadFoo> = createEffect(() => {
I found the union
method wrapped the ReturnType but it is expanded to cover more than the typing I need at this place.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
不需要手动添加类型。
即使您将其他可观察到的东西添加到混合物中。
如果您有繁殖,我很乐意看看。
旁注:尝试
contlatestfrom
而不是withlatestfrom
: https://github.com/timdeschryver/eslint-plugin-plugin-ngrx/blob/main/main/main/docs/rules/rules/prefer-concat-concat-latest-from .mdManually adding types shouldn't be needed.
Even if you add other observables to the mix.
If you have a reproduction, I'm happy to take a look.
Side note: try
concatLatestFrom
instead ofwithLatestFrom
: https://github.com/timdeschryver/eslint-plugin-ngrx/blob/main/docs/rules/prefer-concat-latest-from.md