Rudimentary selectors

src/app/actions/podcasts.actions.ts

@@ -1,8 +1,9 @@
 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 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;
+    | LoadSuccessAction
+    | LoadFailAction
+    | SelectItemAction;

src/app/app.component.html

@@ -1,10 +1,17 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
-  <h1>
-    Hello, {{title}}!
-  </h1>
-  <div>
-      <ul class="list-unstyled">
-          <li *ngFor="let p of podcasts$ | async">{{p.title}}</li>
-      </ul>
+    <h1>
+        Hello, {{title}}!
+    </h1>
+    <div class="col-md-6">
+        <h1>List of things</h1>
+        <ul class="list-unstyled">
+            <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({
@@ -15,8 +15,13 @@ export class AppComponent {
     podcasts$: Observable<any>;
 
     constructor(private store: Store<State>){
-        console.log('AppComponent', 'ctor', store); 
+        console.log('AppComponent', 'ctor', store);
         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;
         }