NgRx Action Group Creator Marko Stanimirović 

Marko Stanimirović @MarkoStDev ★ Sr. Frontend Engineer at JobCloud ★ NgRx Team Member ★ Angular Belgrade Organizer ★ Hobby Musician ★ M.Sc. in Software Engineering 

Action Creator 

products-page.actions.ts import { createAction } from '@ngrx/store'; 

products-page.actions.ts import { createAction } from '@ngrx/store'; ./ defining an action without payload export const opened = createAction('[Products Page] Opened'); 

products-page.actions.ts import { createAction, props } from '@ngrx/store'; ./ defining an action without payload export const opened = createAction('[Products Page] Opened'); ./ defining an action with payload using the `props` function export const paginationChanged = createAction( '[Products Page] Pagination Changed', props<{ page: number; offset: number }>() ); 

products-page.actions.ts import { createAction, props } from '@ngrx/store'; ./ defining an action without payload export const opened = createAction('[Products Page] Opened'); ./ defining an action with payload using the `props` function export const paginationChanged = createAction( '[Products Page] Pagination Changed', props<{ page: number; offset: number }>() ); ./ defining an action with payload using the props factory export const queryChanged = createAction( '[Product Page] Query Changed', (query: string) .> ({ query }) ); 

products-page.actions.ts import { createAction, props } from '@ngrx/store'; ./ defining an action without payload export const opened = createAction('[Products Page] Opened'); ./ defining an action with payload using the `props` function export const paginationChanged = createAction( '[Products Page] Pagination Changed', props<{ page: number; offset: number }>() ); ./ defining an action with payload using the props factory export const queryChanged = createAction( '[Product Page] Query Changed', (query: string) .> ({ query }) ); products.component.ts import * as ProductsPageActions from './products-page.actions'; @Component({ ** **. */ }) export class ProductsComponent implements OnInit { constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch(ProductsPageActions.opened()); } } 

products-page.actions.ts import { createAction, props } from '@ngrx/store'; ./ defining an action without payload export const opened = createAction('[Products Page] Opened'); ./ defining an action with payload using the `props` function export const paginationChanged = createAction( '[Products Page] Pagination Changed', props<{ page: number; offset: number }>() ); ./ defining an action with payload using the props factory export const queryChanged = createAction( '[Product Page] Query Changed', (query: string) .> ({ query }) ); products.component.ts import * as ProductsPageActions from './products-page.actions'; @Component({ ** **. */ }) export class ProductsComponent implements OnInit { constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch(ProductsPageActions.opened()); } } products/actions/index.ts export * as ProductsPageActions from './products-page.actions'; export * as ProductsApiActions from './products-api.actions'; 

products-page.actions.ts import { createAction, props } from '@ngrx/store'; ./ defining an action without payload export const opened = createAction('[Products Page] Opened'); ./ defining an action with payload using the `props` function export const paginationChanged = createAction( '[Products Page] Pagination Changed', props<{ page: number; offset: number }>() ); ./ defining an action with payload using the props factory export const queryChanged = createAction( '[Product Page] Query Changed', (query: string) .> ({ query }) ); products.component.ts import * as ProductsPageActions from './products-page.actions'; @Component({ ** **. */ }) export class ProductsComponent implements OnInit { constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch(ProductsPageActions.opened()); } } products/actions/index.ts export * as ProductsPageActions from './products-page.actions'; export * as ProductsApiActions from './products-api.actions'; 

createActionGroup 

products-page.actions.ts import { createActionGroup } from '@ngrx/store'; 

products-page.actions.ts import { createActionGroup } from '@ngrx/store'; export const ProductsPageActions = createActionGroup({ source: 'Products Page', events: { }, }); 

products-page.actions.ts import { createActionGroup, emptyProps } from '@ngrx/store'; export const ProductsPageActions = createActionGroup({ source: 'Products Page', events: { ./ defining an event without payload using the `emptyProps` function Opened: emptyProps(), }, }); 

products-page.actions.ts import { createActionGroup, emptyProps, props } from '@ngrx/store'; export const ProductsPageActions = createActionGroup({ source: 'Products Page', events: { ./ defining an event without payload using the `emptyProps` function Opened: emptyProps(), ./ defining an event with payload using the `props` function 'Pagination Changed': props<{ page: number; offset: number }>(), }, }); 

products-page.actions.ts import { createActionGroup, emptyProps, props } from '@ngrx/store'; export const ProductsPageActions = createActionGroup({ source: 'Products Page', events: { ./ defining an event without payload using the `emptyProps` function Opened: emptyProps(), ./ defining an event with payload using the `props` function 'Pagination Changed': props<{ page: number; offset: number }>(), ./ defining an event with payload using the props factory 'Query Changed': (query: string) .> ({ query }), }, }); 

products-page.actions.ts import { createActionGroup, emptyProps, props } from '@ngrx/store'; export const ProductsPageActions = createActionGroup({ source: 'Products Page', events: { ./ defining an event without payload using the `emptyProps` function Opened: emptyProps(), ./ defining an event with payload using the `props` function 'Pagination Changed': props<{ page: number; offset: number }>(), ./ defining an event with payload using the props factory 'Query Changed': (query: string) .> ({ query }), }, }); ./ action type: [Products Page] Opened ProductsPageActions.opened(); ./ action type: [Products Page] Pagination Changed ProductsPageActions.paginationChanged({ page: 10, offset: 100 }); ./ action type: [Products Page] Query Changed ProductsPageActions.queryChanged('ngrx'); 

Limitations 

export const productsLoadedSuccess = createAction( '[Products API] Products Are Loaded Successfully', props<{ products: Product[] }>() ); 

export const productsLoadedSuccess = createAction( '[Products API] Products Are Loaded Successfully', props<{ products: Product[] }>() ); 

Restrictions 

export const ProductsApiActions = createActionGroup({ source: 'Products API', events: { '(Products) "Loaded" Success !!!': props<{ products: Product[] }>(), ./ ... }, }); 

products-api.actions.ts export const productsLoadedSuccess = createAction( '[Products API] Products Loaded Success', props<{ products: Product[] }>() ); export const productsLoadedFailure = createAction( '[Products API] Products Loaded Failure', props<{ errorMsg: string }>() ); export const productCreatedSuccess = createAction( '[Products API] Product Created Success', props<{ product: Product }>() ); export const productCreatedFailure = createAction( '[Products API] Product Created Failure', props<{ errorMsg: string }>() ); export const productUpdatedSuccess = createAction( '[Products API] Product Updated Success', props<{ product: Product }>() ); export const productUpdatedFailure = createAction( '[Products API] Product Updated Failure', props<{ errorMsg: string }>() ); export const ProductsApiActions = createActionGroup({ source: 'Products API', events: { 'Products Loaded Success': props<{ products: Product[] }>(), 'Products Loaded Failure': props<{ errorMsg: string }>(), 'Product Created Success': props<{ product: Product }>(), 'Product Created Failure': props<{ errorMsg: string }>(), 'Product Updated Success': props<{ product: Product }>(), 'Product Updated Failure': props<{ errorMsg: string }>(), }, }); 

Marko Stanimirović @MarkoStDev Thank You!