@briebug/ngrx-smartish v0.0.1-alpha.2
NgRx Smartish
NgRx Smartish is a small utility library that makes creating "smartish" components in Angular a breeze. Smartish Components mixed with NgRx, provide a clean and declartive approach to building applications in Angular.
Getting Started
You can install the package using npm install @briebug/ngrx-smartish
Next you will need to import NgrxSmartishModule
in app.module
as well as provide store using the SMARTISH_STORE_TOKEN
.
import { NgRxSmartishModule, SMARTISH_STORE_TOKEN } from '@briebug/ngrx-smartish';
imoprt { StoreModule, Store } from '@ngrx/store';
@NgModule({
imports: [
NgRxSmartishModule,
StoreModule.forRoot({...})
],
providers: [{ provide: SMARTISH_STORE_TOKEN, useClass: Store }]
})
export class AppModule {}
SmartSelect
With NgRx Smartish you can reference NgRx Selectors directly in your Angular Component's template without the need to inject the store
. You simple need to add the MemoizedSelector
in your component class and reference that property with the smartSelector
pipe in your template.
import { selectError } from 'YOUR-STORE'
@Component({
selector: 'app-error',
template: `<p>{{ selectors.selectError | smartSelect | async }}</p>`
})
export class ErrorComponent {
selectors = { selectError };
}
SmartDispatch
With NgRx Smartish you can dispatch actions directly in your Angular Component's template without the need to dispatch an @Output() EventEmitter
or injecting the store
. You simply can use either the smartDispatch
or smartAction
methods.
smartAction
With NgRx Smartish smartAction
you can call dispatch
on your actions directly in your component templates.
import { smartAction } from '@briebug/ngrx-smartish';
import { tacoAdded } from '...my-actions';
@Component({
selector: 'app-component',
template: `<button (click)="addTaco.dispatch($event)">Add Taco</button>
})
export class MyComponent {
addTaco = smartAction(tacoAdded);
}
smartDispatch
With NgRx Smartish smartDispatch
you can automatically dispatch actions in your component templates. (Note: This is similar to smartAction
but it calls dispatch automatically for you)
import { smartDispatch } from '@briebug/ngrx-smartish';
import { tacoAdded } from '...my-actions';
@Component({
selector: 'app-component',
template: `<button (click)="addTaco($event)">Add Taco</button>
})
export class MyComponent {
addTaco = smartDispatch(tacoAdded);
}
NgRxSmartishComponent
With NgRx Smartish you can reference your NgRx store directly in your Components classes (or templates) without providing the store in the constructor. It's as easy as having your component extends NgRxSmartishComponent
.
@Component({
selector: 'app-tacos',
template: `<app-taco *ngFor="let taco of (tacos$ | async)" [taco]="taco></app-taco>`
})
export class TacosComponent extends NgRxSmartishComponent {
tacos$ = store.select(selectTacos);
}
Testing
Testing with NgRxSmartish is made simple with the NgRxSmartishTestingModule
. Just import NgRxSmartishTestingModule
into your TestBed
with the forRoot()
static method. You can also pass an optional MockStoreConfig
inside of forRoot()
to save you from having to provide provideMockStore(...)
in your tests.
const config = { };
describe('YourSmartishComponent', () => {
beforeEach(async () => {
imports: [NgRxSmartishTestingModule.forRoot({ initialState: {...}})],
declarations: [YourSmartishComponent]
});
});