Upgrade to Pro — share decks privately, control downloads, hide ads and more …

NgRx Action Group Creator

NgRx Action Group Creator

Avatar for Marko Stanimirović

Marko Stanimirović

July 12, 2022
Tweet

More Decks by Marko Stanimirović

Other Decks in Programming

Transcript

  1. Marko Stanimirović @MarkoStDev ★ Sr. Frontend Engineer at JobCloud ★

    NgRx Team Member ★ Angular Belgrade Organizer ★ Hobby Musician ★ M.Sc. in Software Engineering
  2. products-page.actions.ts import { createAction } from '@ngrx/store'; ./ defining an

    action without payload export const opened = createAction('[Products Page] Opened');
  3. 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 }>() );
  4. 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 }) );
  5. 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()); } }
  6. 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';
  7. 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';
  8. 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(), }, });
  9. 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 }>(), }, });
  10. 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 }), }, });
  11. 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');
  12. export const ProductsApiActions = createActionGroup({ source: 'Products API', events: {

    '(Products) "Loaded" Success !!!': props<{ products: Product[] }>(), ./ ... }, });
  13. 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 }>(), }, });