diff --git a/apps/example-app/src/app/examples/product-picker-page/components/product-select-dialog/product-select-dialog.component.ts b/apps/example-app/src/app/examples/product-picker-page/components/product-select-dialog/product-select-dialog.component.ts index b2ff43e6..1bc723a5 100644 --- a/apps/example-app/src/app/examples/product-picker-page/components/product-select-dialog/product-select-dialog.component.ts +++ b/apps/example-app/src/app/examples/product-picker-page/components/product-select-dialog/product-select-dialog.component.ts @@ -4,7 +4,7 @@ import { map } from 'rxjs/operators'; import { Store } from '@ngrx/store'; import { Product, ProductFilter } from '../../../models'; import { Sort } from 'ngrx-traits/traits'; -import { ProductsLocalTraits } from './products.traits'; +import { ProductsLocalTraits } from './products.local-traits'; @Component({ selector: 'product-select-dialog', @@ -47,9 +47,9 @@ import { ProductsLocalTraits } from './products.traits'; }) export class ProductSelectDialogComponent implements OnInit { data$ = combineLatest([ - this.store.select(this.localTraits.localSelectors.selectProductsList), - this.store.select(this.localTraits.localSelectors.isProductsLoading), - this.store.select(this.localTraits.localSelectors.selectProductSelected), + this.store.select(this.traits.localSelectors.selectProductsList), + this.store.select(this.traits.localSelectors.isProductsLoading), + this.store.select(this.traits.localSelectors.selectProductSelected), ]).pipe( map(([products, isLoading, selectedProduct]) => ({ products, @@ -58,22 +58,20 @@ export class ProductSelectDialogComponent implements OnInit { })) ); - constructor(private store: Store, private localTraits: ProductsLocalTraits) {} + constructor(private store: Store, private traits: ProductsLocalTraits) {} ngOnInit() { - this.store.dispatch(this.localTraits.localActions.loadProducts()); + this.store.dispatch(this.traits.localActions.loadProducts()); } select({ id }: Product) { - this.store.dispatch(this.localTraits.localActions.selectProduct({ id })); + this.store.dispatch(this.traits.localActions.selectProduct({ id })); } filter(filters: ProductFilter) { - this.store.dispatch( - this.localTraits.localActions.filterProducts({ filters }) - ); + this.store.dispatch(this.traits.localActions.filterProducts({ filters })); } sort(sort: Sort) { - this.store.dispatch(this.localTraits.localActions.sortProducts(sort)); + this.store.dispatch(this.traits.localActions.sortProducts(sort)); } } diff --git a/apps/example-app/src/app/examples/product-picker-page/components/product-select-dialog/products.traits.ts b/apps/example-app/src/app/examples/product-picker-page/components/product-select-dialog/products.local-traits.ts similarity index 100% rename from apps/example-app/src/app/examples/product-picker-page/components/product-select-dialog/products.traits.ts rename to apps/example-app/src/app/examples/product-picker-page/components/product-select-dialog/products.local-traits.ts diff --git a/libs/ngrx-traits/src/lib/local-store/README.md b/libs/ngrx-traits/src/lib/local-store/README.md index 5545b921..0c08bd25 100644 --- a/libs/ngrx-traits/src/lib/local-store/README.md +++ b/libs/ngrx-traits/src/lib/local-store/README.md @@ -47,15 +47,7 @@ import { ProductService } from './product.service'; @Injectable() export class ProductsLocalTraits extends TraitsLocalStore { - // TraitsLocalStore adds a reference to the injector so to get a service reference you can - productService = this.injector.get(ProductService); - //Alternativally you could override the constructor to get a reference to your service - // constructor( - // injector: Injector, - // private productService: ProductService - // ) { - // super(injector); - // } + loadProducts$ = createEffect(() => this.actions$.pipe( ofType(this.localActions.loadProducts), @@ -69,6 +61,14 @@ export class ProductsLocalTraits extends TraitsLocalStore { return { componentName: 'ProductsPickerComponent', @@ -79,7 +79,7 @@ export class ProductsLocalTraits extends TraitsLocalStore` -the _typeof traitsFactory_ gives the types for the localActions and localSelectors properties in the class. +the _typeof traitsFactory_ gives the types for the localActions and localSelectors properties in the class. Also you must override the constructor, one to inject either the service you want to call, and to add ` this.traits.addEffects(this)` that registers the effects in the current class otherwise the wont run You can also add custom actions, selectors, reducers, and effects to your LocalTrait by creating a [Custom Traits](../../../traits/src/custom-traits.md), for this is just an extra effect we need and this should help with most of the cases.