コンポーネントからアクションがディスパッチされたときにngrxエフェクトが呼び出されない

Question

ngrxストアに対処する予定のアクションにディスパッチしない問題が発生しています。

signin() { 
    this.formStatus.submitted = true; 
    if (this.formStatus.form.valid) { 
     this.store.dispatch(new StandardSigninAction(this.formStatus.form.value.credentials)); 
    } 
    } 

アクション：

export const ActionTypes = { 
    STANDARD_SIGNIN: type('[Session] Standard Signin'), 
    LOAD_PERSONAL_INFO: type('[Session] Load Personal Info'), 
    LOAD_USER_ACCOUNT: type('[Session] Load User Account'), 
    RELOAD_PERSONAL_INFO: type('[Session] Reload Personal Info'), 
    CLEAR_USER_ACCOUNT: type('[Session] Clear User Account') 
}; 

export class StandardSigninAction implements Action { 
    type = ActionTypes.STANDARD_SIGNIN; 

    constructor(public payload: Credentials) { 
    } 
} 
... 

export type Actions 
    = StandardSigninAction 
    | LoadPersonalInfoAction 
    | ClearUserAccountAction 
    | ReloadPersonalInfoAction 
    | LoadUserAccountAction; 

効果：ここ

は派遣しようとするコンポーネントである私は、コンポーネントが呼び出しを行い、デバッグで見ることができる

@Effect() 
    standardSignin$: Observable<Action> = this.actions$ 
    .ofType(session.ActionTypes.STANDARD_SIGNIN) 
    .map((action: StandardSigninAction) => action.payload) 
    .switchMap((credentials: Credentials) => 
     this.sessionSigninService.signin(credentials) 
     .map(sessionToken => { 
      return new LoadPersonalInfoAction(sessionToken); 
     }) 
    ); 

発送方法。コンストラクタ内のブレークポイントがヒットしたので、 StandardSigninActionが実際にインスタンス化されていることも確認できます。

しかしstandardSignin$効果が呼び出されない...

何がおそらく呼び出されていない効果を引き起こす可能性がありますか？

店内で起こっていることをどのようにデバッグできますか？

誰かが助けてくれますか？

P.S.次のように私は私の輸入では上記の効果を実行します：

EffectsModule.run(SessionEffects), 

編集：ここに私のSessionSigninService.signin方法がある（観測を返さない）

signin(credentials: Credentials) { 
    const headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}); 
    const options = new RequestOptions({headers: headers}); 
    const body = 'username=' + credentials.username + '&password=' + credentials.password; 
    return this.http.post(this.urls.AUTHENTICATION.SIGNIN, body, options).map(res => res.headers.get('x-auth-token')); 
    } 

Answer 1

これがあることを行っていません決定的な答えですが、うまくいけば助けになります。

始める前に：

• は、あなたが（あなたが使用している角度のバージョンに適しています）@ngrxパッケージの最新バージョンを使用していることを確認します。あなたはすべてのパッケージを更新した場合
• 、あなたは、あなたが（、バンドラ、サーバなど再起動することがされて）

をあなたはまだ行っていないしている場合、開発環境を再起動してくださいthe implementation of the Storeを参照する必要があります - あなたは間違っている可能性のあるものについて、教育を受けた推測をするようにしてください。注：Storeは非常に軽いです。それは観測可能（状態をソースとして使用する）とオブザーバ（ディスパッチャに向かう）の両方です。

あなたはstore.dispatchを見れば、あなたはDispatcherにnextを呼び出す、それは store.nextの別名だとわかります。

だから、呼び出し：

this.store.dispatch(new StandardSigninAction(this.formStatus.form.value.credentials)); 

はちょうどディスパッチャから放出されたアクションが表示されるはずです。

Actionsあなたのエフェクトに注入されているものもかなり明るいです。それは、そのソースとしてDispatcherを使用している観測値です。

効果を流れるされているアクションを見て、あなたはこの置き換えることができます。これで

@Effect() 
standardSignin$: Observable<Action> = this.actions$ 
    .ofType(session.ActionTypes.STANDARD_SIGNIN) 

：

@Effect() 
standardSignin$: Observable<Action> = this.actions$ 
    .do((action) => console.log(`Received ${action.type}`)) 
    .filter((action) => action.type === session.ActionTypes.STANDARD_SIGNIN) 

ofTypeがオペレーターではありませんが。それは方法なので、doベースのログを追加するには、filterに置き換える必要があります。

アクションを受け取っている場合、エフェクトの実装に何か問題があります（または、アクションタイプの文字列/定数があなたのものではなく、何かが不一致であると思われます）。

効果が派遣作用を受けていない場合は、最も可能性のある説明は、あなたがStandardSigninAction派遣されてstoreは、あなたの効果を使用しているものと同じstoreではないということでしょう - つまり、あなたはDIの問題を抱えています。

この場合、他のSessionEffectsと何が違うのかを見てください。 （少なくともあなたには何かが働いています。これは実験を開始するのに適しています）。彼らは別のモジュールから派遣されていますか？ StandardSigninActionをディスパッチするモジュールはフィーチャモジュールですか？

SessionEffectsの作業の1つをハックして、ディスパッチされたアクションをStandardSigninActionに置き換えるとどうなりますか？エフェクトが実行されますか？

この回答の最後の質問は私が回答したい質問ではありません。彼らは自分自身に尋ねて調査しなければならない質問です。おそらくもっと紛らわしい - - 実際に起こって物事を保つために、新たな観察可能な再放出せずにストリームを殺す.catchを使用して「扱い」に見えるエラーあなたの店の流れが原因で未処理のエラーやのいずれかが停止することができる

Answer 2

。

例えば、これは、ストリームを殺す：

this.actions$ 
    .ofType('FETCH') 
    .map(a => a.payload) 
    .switchMap(query => this.apiService.fetch$(query) 
     .map(result => ({ type: 'SUCCESS', payload: result })) 
     .catch(err => console.log(`oops: ${err}`))) // <- breaks stream! 

しかし、これは生きているものを維持します：

this.actions$ 
    .ofType('FETCH') 
    .map(a => a.payload) 
    .switchMap(query => this.apiService.fetch$(query) 
     .map(result => ({ type: 'SUCCESS', payload: result })) 
     .catch(e => Observable.of({ type: 'FAIL', payload: e}))) // re-emit 

これは時に考慮することが特に重要である、ところで観察可能な任意のrxjsについて真実であります複数のオブザーバにブロードキャストします（ngrxストアは内部で内部でSubjectを使用します）。