为NGRX 11&#x2B中的创建方法传递的动作键入安全效果。

发布于 2025-02-04 21:04:28 字数 1571 浏览 3 评论 0原文

阅读了几个博客后,详细介绍了使用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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

傻比既视感 2025-02-11 21:04:28

不需要手动添加类型。
即使您将其他可观察到的东西添加到混合物中。
如果您有繁殖,我很乐意看看。

旁注:尝试contlatestfrom而不是withlatestfrom https://github.com/timdeschryver/eslint-plugin-plugin-ngrx/blob/main/main/main/docs/rules/rules/prefer-concat-concat-latest-from .md

Manually 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 of withLatestFrom: https://github.com/timdeschryver/eslint-plugin-ngrx/blob/main/docs/rules/prefer-concat-latest-from.md

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文