Selection working

src/app/actions/podcasts.actions.ts

@@ -1,9 +1,11 @@
 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 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 const SELECT_ITEM_SUCCESS = '[Podcasts] Select Item Success';
+export const SELECT_ITEM_FAILED =  '[Podcasts] Select Item Failed';
 
 export class LoadAction implements Action {
     readonly type = LOAD;
@@ -11,23 +13,28 @@ export class LoadAction implements Action {
 
 export class LoadSuccessAction implements Action {
     readonly type = LOAD_SUCCESS;
-
     constructor(public payload: any) { }
 }
-
 export class LoadFailAction implements Action {
     readonly type = LOAD_FAIL;
-
     constructor(public payload: any) { }
 }
-
 export class SelectItemAction implements Action {
     readonly type = SELECT_ITEM;
-    constructor(public payload: any) { }
+    constructor(public payload: number) { }
+}
+export class SelectItemSuccessAction implements Action {
+    readonly type = SELECT_ITEM_SUCCESS;
+    constructor(public payload: number) { }
+}
+export class SelectItemFailedAction implements Action {
+    readonly type = SELECT_ITEM_FAILED;
 }
 
 export type Actions =
     | LoadAction
     | LoadSuccessAction
     | LoadFailAction
-    | SelectItemAction;
+    | SelectItemAction
+    | SelectItemSuccessAction
+    | SelectItemFailedAction;

src/app/app.component.html

@@ -13,5 +13,8 @@
     </div>
     <div class="col-md-6">
         <h1>Details are here</h1>
+        <div class="well">
+            {{(selected$ | async)?.body}}
+        </div>
     </div>
 </div>

src/app/app.component.ts

@@ -13,10 +13,12 @@ import { State } from 'app/reducers';
 export class AppComponent {
     title = 'Sailor';
     podcasts$: Observable<any>;
+    selected$: Observable<any>;
 
     constructor(private store: Store<State>){
         console.log('AppComponent', 'ctor', store);
         this.podcasts$ = this.store.select(p => p.podcasts.result);
+        this.selected$ = this.store.select(p => p.podcasts.selected);
         this.store.dispatch(new LoadAction());
     }
 

src/app/effects/podcasts.effects.ts

@@ -17,10 +17,16 @@ export class PodcastsEffects {
 
     @Effect() get$ = this.actions$
     .ofType(podcasts.LOAD)
-    .switchMap(payload => this.podcastsService.get()
-               // If successful, dispatch success action with result
-               .map(res => ({ type: podcasts.LOAD_SUCCESS, payload: res.json() }))
-               // If request fails, dispatch failed action
-               .catch(() => Observable.of({ type: podcasts.LOAD_FAIL}))
-              );
+    .switchMap(p => this.podcastsService.get()
+        .map(res => ({ type: podcasts.LOAD_SUCCESS, payload: res.json() }))
+        .catch(() => Observable.of({ type: podcasts.LOAD_FAIL}))
+        );
+
+     @Effect() select$ = this.actions$
+    .ofType(podcasts.SELECT_ITEM)
+    .map((action: podcasts.SelectItemAction) => action.payload)
+    .switchMap(id => this.podcastsService.getItem(id)
+        .map(res => ({ type: podcasts.SELECT_ITEM_SUCCESS, payload: res.json() }))
+        .catch(() => Observable.of({ type: podcasts.SELECT_ITEM_FAILED}))
+        );
 }

src/app/reducers/podcasts.reducer.ts

@@ -24,28 +24,24 @@ export function reducer(state = initialState, action: podcasts.Actions): State {
                 loading: true
             }
         }
-
         case podcasts.LOAD_SUCCESS: {
-
             return {
                 ...state,
                 result: action.payload,
                 loading: false,
             };
         }
-
         case podcasts.LOAD_FAIL: {
-
             return {
                 ...state,
                 loading: false,
             };
         }
-
-        case podcasts.SELECT_ITEM:
-            console.log('SELECTED ITEM');
-            return state;
-
+        case podcasts.SELECT_ITEM_SUCCESS:
+            return {
+                ...state,
+                selected: action.payload
+            };
         default: {
             return state;
         }

src/app/services/podcasts.service.ts

@@ -10,4 +10,9 @@ export class PodcastsService {
         console.log('PodcastsService', 'get');
         return this.http.get('https://jsonplaceholder.typicode.com/posts');
     }
+
+    getItem(id: any) : Observable<any> {
+        console.log('PodcastsService', 'get');
+        return this.http.get('https://jsonplaceholder.typicode.com/posts/' + id);
+    }
 }