feat: add example app

projects/example/src/app/app.component.ts

@@ -2,6 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngrx-root',
-  template: '',
+  template: '<ngrx-users></ngrx-users>',
 })
 export class AppComponent {}

projects/example/src/app/app.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { StoreModule } from '@ngrx/store';
 import { AppComponent } from './app.component';
+import { UsersModule } from './users/users.module';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule],
-  providers: [],
+  imports: [BrowserModule, StoreModule.forRoot({}), UsersModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

projects/example/src/app/users/users.actions.ts

@@ -0,0 +1,7 @@
+import { createAction, props } from '@ngrx/store';
+
+export const enter = createAction('[Users Page] Enter');
+export const updateSearchTerm = createAction(
+  '[Users Page] Update Search Term',
+  props<{ searchTerm: string }>(),
+);

projects/example/src/app/users/users.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { selectFilteredUsers } from './users.selectors';
+import * as UsersPageActions from './users.actions';
+
+@Component({
+  selector: 'ngrx-users',
+  template: `
+    <h2>Users</h2>
+    <input type="text" [formControl]="searchControl" placeholder="Search..." />
+    <ul>
+      <li *ngFor="let user of filteredUsers$ | async">
+        {{ user }}
+      </li>
+    </ul>
+  `,
+})
+export class UsersComponent implements OnInit, OnDestroy {
+  private readonly destroy = new Subject();
+  readonly searchControl = new FormControl('');
+  readonly filteredUsers$ = this.store.select(selectFilteredUsers);
+
+  constructor(private readonly store: Store) {}
+
+  ngOnInit(): void {
+    this.store.dispatch(UsersPageActions.enter());
+
+    this.searchControl.valueChanges
+      .pipe(takeUntil(this.destroy))
+      .subscribe(searchTerm =>
+        this.store.dispatch(UsersPageActions.updateSearchTerm({ searchTerm })),
+      );
+  }
+
+  ngOnDestroy(): void {
+    this.destroy.next();
+  }
+}

projects/example/src/app/users/users.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { StoreModule } from '@ngrx/store';
+import { UsersComponent } from './users.component';
+import * as fromUsers from './users.reducer';
+
+@NgModule({
+  imports: [CommonModule, ReactiveFormsModule, StoreModule.forFeature('users', fromUsers.reducer)],
+  declarations: [UsersComponent],
+  exports: [UsersComponent],
+})
+export class UsersModule {}

projects/example/src/app/users/users.reducer.ts

@@ -0,0 +1,18 @@
+import { createReducer, on } from '@ngrx/store';
+import * as UsersPageActions from './users.actions';
+
+export interface State {
+  users: string[];
+  searchTerm: string;
+}
+
+export const initialState: State = {
+  users: ['marko', 'john', 'jimmy', 'steve', 'michael'],
+  searchTerm: '',
+};
+
+export const reducer = createReducer(
+  initialState,
+  on(UsersPageActions.enter, () => initialState),
+  on(UsersPageActions.updateSearchTerm, (state, { searchTerm }) => ({ ...state, searchTerm })),
+);

projects/example/src/app/users/users.selectors.ts

@@ -0,0 +1,16 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { createChildSelectors } from 'ngrx-child-selectors';
+import * as fromUsers from './users.reducer';
+
+export const selectUserState = createFeatureSelector<fromUsers.State>('users');
+
+export const { selectUsers, selectSearchTerm } = createChildSelectors(
+  selectUserState,
+  fromUsers.initialState,
+);
+
+export const selectFilteredUsers = createSelector(
+  selectUsers,
+  selectSearchTerm,
+  (users, searchTerm) => users.filter(u => u.includes(searchTerm)),
+);