首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在NgRx createAction props<>()中使用泛型类型

在NgRx中,createAction函数是用于创建一个action的工厂函数。props函数是createAction的一个参数,用于定义action的payload。

在props函数中使用泛型类型,可以为action的payload指定类型。具体使用方法如下:

  1. 首先,导入createAction和props函数:
代码语言:txt
复制
import { createAction, props } from '@ngrx/store';
  1. 然后,定义一个泛型类型,用于指定action的payload类型。例如,我们定义一个名为MyPayload的泛型类型:
代码语言:txt
复制
interface MyPayload {
  id: number;
  name: string;
}
  1. 接下来,使用props函数为action定义payload类型。在createAction函数中,通过props函数传入一个对象,对象的属性名即为payload的属性名,属性值为payload的类型。例如:
代码语言:txt
复制
export const myAction = createAction(
  '[My Feature] My Action',
  props<MyPayload>()
);
  1. 最后,我们可以在组件中使用myAction来创建一个action,并传入对应的payload:
代码语言:txt
复制
import { Store } from '@ngrx/store';
import { myAction } from './my-feature.actions';

@Component({
  // ...
})
export class MyComponent {
  constructor(private store: Store) {}

  onButtonClick() {
    const payload: MyPayload = {
      id: 1,
      name: 'example'
    };

    this.store.dispatch(myAction(payload));
  }
}

这样,我们就可以在NgRx中使用泛型类型来定义action的payload,并在组件中使用createAction函数创建带有指定payload类型的action。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 接入 NGRX 状态管理

NGRX 状态管理包含了两条变更状态的主线: 同步变更状态:用户 => Action => Reducer => Store(State); 异步变更状态:用户 => Action => Effects...; @ngrx/store-devtools:调试的工具,需要配合github.com/reduxjs/red… 使用; @ngrx/schematics:提供使用 NGRX 的 CLI 命令,需要与...: import { createActionGroup, emptyProps, props } from '@ngrx/store'; export const UserActions = createActionGroup...DelUser: emptyProps(), }, }); 增加用于添加用户的AddUser ,并使用 props 约束所接收的参数类型; 增加用于删除用户的DelUser,并使用emptyProps...,更新用户数据在接下来的副作用编写中会体现: import { createActionGroup, emptyProps, props } from '@ngrx/store'; export const

24810

通过三个实例掌握如何使用 TypeScript 创建可重用的 React 组件

在深入具体操作之前,先简单介绍一下的概念。允许你在定义组件时不指定具体的数据类型,而是在使用组件时再指定具体的类型。...市面上已经有很多关于 TypeScript 的文章和教程,所以本文将聚焦于如何在 React 组件中使用,让你的组件变得更加灵活和可重用。...这种模式通常被称为“render props”,它可以让你更灵活地控制数据的渲染方式。 使用组件渲染字符串 接下来,我们用一个字符串类型的数据来使用这个组件。...这展示了在 React 组件的强大作用,我们可以用同一个组件处理不同类型的数据获取和展示。 三、使用创建通用的 React 表单组件 在实际开发,表单是我们常用的组件之一。...使用后,你可以创建一个通用的表单组件,可以用于任何类型的表单字段。这展示了在 React 组件的强大作用,使得我们的组件更加灵活和可复用。

20610
  • 关于TypeScript,希望这次能让你彻底理解

    因此,在这篇文章,我想和大家分享一些我在实际开发过程遇到的(Generics)使用案例。通过这些真实的例子,相信的概念对你来说会更加具有意义,也更容易理解。...简介 那么,究竟是什么呢?简而言之,允许我们编写能够适用于广泛的原始类型和对象的类型安全代码。在声明新类型、接口、函数和类时,都可以使用。...} = props; // 实现细节在此省略 return ; }; } 的 extend 关键字允许我们定义一个类型 T,它必须至少具有类型...target); } 如果你是初学者,你可能会这样使用它: identifyType(5); 但是,TypeScript可以从你作为第一个参数传递的值推断出类型,最好是这样使用:...结束 在我们今天的旅程,我们一起探索了TypeScript那些令人兴奋的知识。从类型推断的便捷性到在日常编程的灵活运用,希望这些内容能够帮助你解开围绕的所有迷雾。

    16210

    TS 进阶 - 实际应用 02

    # 在 React 中使用 TypeScript 在 React 中使用 TypeScript 主要关注三个方面: 组件声明 声明一个 React 组件的方式 坑位 React API 预留出的坑位...,其用法是接受的唯一参数为这个组件的属性类型。...# 组件 使用简单函数和使用 FC 的重要差异之一是,使用 FC 时无法再使用组件。...和 useMemo,它们的参数分别表示包裹的函数和计算产物,使用方式类型,也分为隐式推导和显式提供: const Container = () => { // 推导为 (input: number...,请求相关的类型定义 推荐的方式是定义响应结构体,然后使用 biz 的业务逻辑类型定义进行填充 tool.ts,工具类型定义 一般是推荐把比较通用的工具类型抽离到专门的工具类型,这里只存放使用场景特殊的部分

    1.6K20

    React实战精讲(React_TSAPI)

    你能所学到的知识点 ❝ TS_React:使用来改善类型 TS_React:Hook类型化 TS_React:类型化事件回调 React API ❞ TS_React:使用来改善类型 TypeScript...❝指的是「类型参数化」:即将原来某种「具体的类型进⾏参数化」 ❞ 在像 C++/Java/Rust 这样的 OOP 语⾔,可以「使⽤来创建可重⽤的组件,⼀个组件可以⽀持多种类型的数据」。...❝主要的「区别」是 在 JavaScript ,关心的是变量的「值」 在 TypeScript ,关心的是变量的「类型」 ❞ 但对于我们的User例子来说,使用一个「」看起来是这样的。...「限制每个类型变量接受的类型数量」,这就是「约束」的作⽤。...---- 箭头函数在jsx语法 在前面的例子,我们只举例了如何用定义常规的函数语法,而不是ES6引入的箭头函数语法。

    10.4K30

    深入理解 TypeScript 的 Keyof 运算符,让你的代码更安全、更灵活!

    一、如何定义 KeyOf 运算符 在 TypeScript ,keyof 运算符用于获取用户定义的值。它主要用于,格式类似于联合运算符及其属性。keyof 运算符会检索用户指定的值的索引。...这种运算符可以用于集合和类等对象,通过键值对来存储和检索数据。使用 map 实例对象的 object.keys() 方法,我们可以获取存储在内存的键。...二、在使用 KeyOf 运算 使用 KeyOf 运算符应用约束 在 TypeScript ,keyof 运算符常用于在型函数应用约束。...OptionsFlags 被定义为一个包含类型参数 T 的类型。...在本文中,我们探讨了如何在 TypeScript 、映射类型、显式键、索引签名、条件映射类型和实用类型使用 keyof 运算符。

    19210

    React技巧之将CSS作为props传递

    ~ React.CSSProperties 在React TypeScript中使用React.CSSProperties类型来作为props传递CSS样式。...你可以通过使用你的IDE,来弄清楚特定prop所期望的类型是什么。 style-prop-cssproperties.gif 在大多数IDE,你可以将鼠标悬停在prop上,看到prop的值。...我们在组件的props使用React.ButtonHTMLAttributes类型来扩展button元素。 你可以在接口中添加自定义props,你的组件可以传递任何特定元素的props。...上述示例,Button组件可以被传递任何特定的button props。如果你需要一个更广泛的类型,你可以使用HTMLAttributes类型来代替。...需要注意的是,我们在例子把HTMLButtonElement类型传递给了ButtonHTMLAttributes类型被统一命名为HTML***Element。一旦你开始输入HTML...

    2.4K10

    【TypeScript 演化史 — 第十一章】参数默认类型 和 新的 –strict 编译选项

    image.png TypeScript 2.3 增加了对声明参数默认类型的支持,允许为类型类型参数指定默认类型。...使用类型定义 Props 和 State 虽然上面的示例编译和运行得很好,但是咱们的 Component 类型定义不是很精确。...咱们得更具体一点,通过两种类型: Props 和 State,这样就可以准确地描述 props 和 state 属性的结构。...参数默认类型 从 TypeScript 2.3 开始,咱们可以为每个类型参数添加一个默认类型。...使用参数默认值,就可以完全去掉附加的可构造类型,并将{}设置为默认类型 type Constructor = new (...args: any[]) => T; 语法稍微复杂一些,

    1.7K20

    typescript叫anyscript?不存在的

    定义一种type或者interface,可以传入参数,达到类型复用的效果: // 一个对象所有的key都是同一类型 // before const o: { a: number; b: number...想想就知道,没有任何其他条件或者约束(约束),直接这样用T[K],ts怎么可能知道这是什么类型?怎么知道你想干什么?那就报错咯。...<{ id: string; // 使用react-router里面的类型RouteComponentProps给props声明匹配的参数 }> & { // ...其他原本组件的props...1 console.log(this.props.match.params.id); } } 不懂其他库的类型系统就点进去看源码 当我们使用别人的库、框架的时候,不懂人家的类型系统、不懂人家的数据结构...的时候,提示a 一些高级的类型 使用ts基本语法和关键字,可以实现一些高级的特性(Partial,Required,Pick,Exclude,Omit等等),增加了类型复用性。

    2.2K22

    【TypeScript 演化史 -- 11】参数默认类型 和 新的 --strict 编译选项

    TypeScript 2.3 增加了对声明参数默认类型的支持,允许为类型类型参数指定默认类型。...使用类型定义 Props 和 State 虽然上面的示例编译和运行得很好,但是咱们的 Component 类型定义不是很精确。...咱们得更具体一点,通过两种类型: Props 和 State,这样就可以准确地描述 props 和 state 属性的结构。...参数默认类型 从 TypeScript 2.3 开始,咱们可以为每个类型参数添加一个默认类型。...使用参数默认值,就可以完全去掉附加的可构造类型,并将{}设置为默认类型 type Constructor = new (...args: any[]) => T; 语法稍微复杂一些,

    1.8K30

    Vue3.3 的新功能的体验(下):组件(Generic Component) 与 defineSlots

    相当于制定了一个白名单,名单里面的类型可以传,不在名单里面的不可以传。 TS 的可以帮助我们更准确的推断类型,从而在编写代码的时候,可以有更准确的提示和提供验证依据。...组件(Generic Component) 组件的props可以设置各种类型,那么如果想用的话,要如何设置呢?...这里定义了几个属性,第一个使用,第二个是 number[],第三个是任意类型的数组。...,使用可以准确的推断类型,在模板里面可以有更准确的提示,如果类型不合格,可以有提示信息。...准确的说,是定义作用域插槽的props类型(支持),然后返回父组件传入的插槽。

    91220

    检查JavaScript文件_TypeScript笔记18

    未指定的类型参数默认any JavaScript 没有提供用来表示参数的语法,因此未指定的类型参数都默认any类型 在 JavaScript 主要以 2 种形式出现: 继承类,创建 Promise...等(类、Promise 等定义在外部d.ts里) 其它自定义(通过 JSDoc 标明类型) 例如: // 继承类 - .js import { Component } from 'react...{this.props.unknownProp} } } 其中this.props具有类型: React.Component.props:...”: // .js 声明,但不填类型参数 /** @type{Array} */ var x = []; x.push(1); // OK x.push("string"); /...对于没在构造函数定义,或者构造函数类型为undefined或null(此时为any)的属性,其类型为所有赋值右侧值类型的联合 定义在构造函数的属性都认为是一定存在的,其它地方(成员方法)出现的都当作可选的

    2.4K50

    Vue3 使用 TypeScript

    true } }) 基于类型声明通过来定义 Propsinterface MyProps { phone: string...= defineProps()语法规定传递给 defineProps 的参数必须是以下格式:defineProps() 一个对象字面量对同一个文件的一个接口或对象类型字面量的引用...> 情况 写法当没有使用 时,想要类型检查,那么必须使用 defineComponent() 传入setup() 的 props 对象类型是从 props 选项推导而来import...Ref 声明import type {Ref} from "vue"const studentId: Ref = ref(231)声明调用ref 时,传入一个参数...在Vue3 ,如果我们要给 提供的值 标注类型,可以借助这个 接口 来实 InjectionKey 接口,它是一个继承自 Symbol 的类型,可以用来在提供者和消费者之间同步注入值的类型

    62020

    学会这几个API,vue3直接上手

    attrs useSlots和useAttrs() ref 接受一个内部值并返回一个响应式且可变的 ref 对象,在setup函数内部访问ref函数需要加.value, 如果要加类型,要用,不加则会类型推论...,也可以联合类型 如果将对象分配为ref值,则它将被reactive函数处理为深层的响应式对象: //不建议,内部也是reactive处理 const ref1 = ref({ a: 10, }...); //不确定类型 const ref3 = ref(); ref3.value = 1; ref3.value = ""; //数组对象,ts类型声明,用...Obj1[]; }; const ref2 = ref([ { b: "", c: [{ c: "" }], }, ]); reactive 用来声明响应式的对象,类型通过添加...(defineProps(), { msg: "default", }); withDefaults接收两个参数,第一个参数是defineProps加props字段的,第二个字段是默认值

    69120

    在 TypeScript 中使用使用指南

    的实际应用 提供了一种通用且类型安全的方式来处理 TypeScript 的数据结构和算法。通过使用,开发者可以确保他们的代码可以在任何类型上运行,而不牺牲类型信息。...流行库/框架现实例子 不仅仅是理论概念,在现实的库和框架它们被广泛使用,提供可扩展和类型安全的解决方案。...让我们看下其中一些技术,包括 constraints,utility 类型使用 keyof 关键字。 的约束 constraints 通过添加约束来更优化,以便限制可以使用类型。...通过这个方法,这能函数能放心使用将会存在的传递过来的参数的 length 属性。 使用 keyof TypeScript keyof 操作符可以在结合使用,来确保属性名的类型安全。...在该章节,我们将讨论使用使用的基本技巧,以及如何避免可能导致复杂错误或降低代码可读性的错误。 命名变量的最佳实践 命名变量应该是直观的,如果可能,应该具有描述性。

    15010

    三千字讲清TypeScript与React的实战技巧

    之外还需要state,对于class写法的组件要的支持,即Component,因此需要传入传入state和props类型,这样我们就可以正常使用props和state了。...,这个就是需要ref组件的类型,因为这个是input组件,所以类型是HTMLInputElement,当然如果是div组件的话那么这个类型就是HTMLDivElement。...as any) as RecomposedProps } } 这个函数接受一个defaultProps对象,这里是约束,代表DP这个是个对象,然后返回一个匿名函数...再看这个匿名函数,此函数也有一个P,这个P也被约束过,即>,意思就是这个必须包含可选的DP类型(实际上这个P就是组件传入的Props类型)。...其实这个函数只做了一件事,把可选的defaultProps的类型剔除后,加入必选的defaultProps的类型,从而形成一个新的Props类型,这个Props类型的defaultProps相关属性就变成了必选的

    2.3K51
    领券