Rudimentary selectors

src/app/actions/podcasts.actions.ts

@@ -3,6 +3,7 @@ import { Action } from '@ngrx/store';
 export const LOAD =          '[Podcasts] Load';
 export const LOAD_SUCCESS =  '[Podcasts] Load Success';
 export const LOAD_FAIL =     '[Podcasts] Load Fail';
+export const SELECT_ITEM =   '[Podcasts] Select Item';
 
 export class LoadAction implements Action {
     readonly type = LOAD;
@@ -20,7 +21,13 @@ export class LoadFailAction implements Action {
     constructor(public payload: any) { }
 }
 
+export class SelectItemAction implements Action {
+    readonly type = SELECT_ITEM;
+    constructor(public payload: any) { }
+}
+
 export type Actions =
     | LoadAction
     | LoadSuccessAction
-            | LoadFailAction;
+    | LoadFailAction
+    | SelectItemAction;

src/app/app.component.html

@@ -3,8 +3,15 @@
     <h1>
         Hello, {{title}}!
     </h1>
-  <div>
+    <div class="col-md-6">
+        <h1>List of things</h1>
         <ul class="list-unstyled">
-          <li *ngFor="let p of podcasts$ | async">{{p.title}}</li>
+            <li *ngFor="let p of podcasts$ | async" (click)="onSelect(p)">
+                {{p.title}}
+            </li>
         </ul>
     </div>
+    <div class="col-md-6">
+        <h1>Details are here</h1>
+    </div>
+</div>

src/app/app.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
-import { LoadAction } from 'app/actions/podcasts.actions';
+import { LoadAction, SelectItemAction } from 'app/actions/podcasts.actions';
 import { State } from 'app/reducers';
 
 @Component({
@@ -19,4 +19,9 @@ export class AppComponent {
         this.podcasts$ = this.store.select(p => p.podcasts.result);
         this.store.dispatch(new LoadAction());
     }
+
+    onSelect(p){
+        console.log(p);
+        this.store.dispatch(new SelectItemAction(p.id));
+    }
 }

src/app/reducers/podcasts.reducer.ts

@@ -4,12 +4,14 @@ export interface State {
     loading: boolean;
     entities: { [id: string]: any };
     result: string[];
+    selected: any;
 }
 
 export const initialState: State = {
     loading: false,
     entities: {},
-    result: []
+    result: [],
+    selected: null
 }
 
 export function reducer(state = initialState, action: podcasts.Actions): State {
@@ -18,6 +20,7 @@ export function reducer(state = initialState, action: podcasts.Actions): State {
             return {
                 ...state,
                 result: [],
+                selected: null,
                 loading: true
             }
         }
@@ -39,6 +42,10 @@ export function reducer(state = initialState, action: podcasts.Actions): State {
             };
         }
 
+        case podcasts.SELECT_ITEM:
+            console.log('SELECTED ITEM');
+            return state;
+
         default: {
             return state;
         }