NgRx Action Group Creator

Transcript

1. NgRx Action Group Creator Marko Stanimirović
2. Marko Stanimirović @MarkoStDev ★ Sr. Frontend Engineer at JobCloud ★ NgRx Team Member ★ Angular Belgrade Organizer ★ Hobby Musician ★ M.Sc. in Software Engineering
3. Action Creator
4. products-page.actions.ts import { createAction } from '@ngrx/store';
5. products-page.actions.ts import { createAction } from '@ngrx/store'; ./ defining an action without payload export const opened = createAction('[Products Page] 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 }>() );
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 }) );
8. 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()); } }
9. 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';
10. 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';
11. createActionGroup
12. products-page.actions.ts import { createActionGroup } from '@ngrx/store';
13. products-page.actions.ts import { createActionGroup } from '@ngrx/store'; export const ProductsPageActions = createActionGroup({ source: 'Products Page', events: { }, });
14. 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(), }, });
15. 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 }>(), }, });
16. 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 }), }, });
17. 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');
18. Limitations
19. export const productsLoadedSuccess = createAction( '[Products API] Products Are Loaded Successfully', props<{ products: Product[] }>() );
20. export const productsLoadedSuccess = createAction( '[Products API] Products Are Loaded Successfully', props<{ products: Product[] }>() );
21. Restrictions
22. export const ProductsApiActions = createActionGroup({ source: 'Products API', events: { '(Products) "Loaded" Success !!!': props<{ products: Product[] }>(), ./ ... }, });
23. 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 }>(), }, });
24. Marko Stanimirović @MarkoStDev Thank You!