ngrx-effects RESTコールを作成する

Question

ngrx/effectsを使用して角型RESTアプリケーションを開発しています。私はサンプルアプリケーションGITを使用しています。私はエフェクトのハードコードされたjsonデータをhttp REST終了から置き換えることを試みています。私はエラーが発生しています "効果" GetTodoEffects.todo $ "は無効なアクションを発送しました"。あなたはそれを解決するのを手伝ってください。すべてのものはgitコードと同じですが、以下にペーストしているエフェクトコードは除きます。 効果コード：

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/mergeMap'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/withLatestFrom' 
import { of } from 'rxjs/observable/of'; 
import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Action, Store } from '@ngrx/store'; 
import { Actions, Effect, toPayload } from '@ngrx/effects'; 
import * as Act from '../actions/app.actions'; 
import * as fromStore from '../reducers'; 

import { HttpClient } from '@angular/common/http'; 

@Injectable() 
export class GetTodoEffects { 

@Effect() todo$ = this.actions$.ofType(Act.GET_TODO) 
.map(toPayload) 
.withLatestFrom(this.store$) 
.mergeMap(([ payload, store ]) => { 

    return this.http$ 
    .get(`http://localhost:4000/data/`) 
    .map(data => { 
     return [ 
     new Act.GetTodoSuccess({ data: data }) 
     ] 
    }) 
    .catch((error) => { 
     return [ 
     new Act.GetTodoFailed({ error: error }) 
     ] 
    }) 
}); 


constructor(
    private actions$: Actions, 
    private http$: HttpClient, 
    private store$: Store<fromStore.State> 
) {} 
} 

私はRESTエンドポイントとしてJSON-サーバーを使用しています。私は疑うJSON-サーバー--port 4000 --watch EXPT-結果-sample.json

EXPT-結果-sample.json

[ 
     { 
      text: "Todo 1" 
     }, 
     { 
      text: "Todo 2" 
     }, 
     { 
      text: "Todo 3" 
     } 
     ] 
    }) 
    ] 

Answer 1

まず最初は配列です。観察可能なものに変更してみてください。

return this.http$ 
    .get(`http://localhost:4000/data/`) 
    .map(data => { 
     // You don't need an array because it's only 1 item 
     // If you want array use `Observable.from([ /* actions here */ ])` 
     // but then you'll need to change `map` above to 
     //  `mergeMap` or `switchMap` 
     // (no big difference for this use case, 
     //  `switchMap` is more conventional in Ngrx effects) 
     return new Act.GetTodoSuccess({ data: data }); 
    }) 
    .catch((error) => { 
     // You probably haven't called this yet, 
     // but `catch` must return `Obsrvable` 
     // Again, if you want an array use `Observable.from([ /* array */ ])` 
     return Observable.of(
     new Act.GetTodoFailed({ error: error }) 
    ); 
    })