ngrx 效果中 Angular 5 服务的用户

Question

我正在尝试使用我的身份验证服务获取用户令牌，然后使用效果文件中的令牌发出 http 请求，然后发送另一个操作。但它一直在 (action) => 上给我这个错误。我是 effect 的新手，Angular 非常感谢您的帮助！

'(action: [Action, State]) => void' 类型的参数不可分配给 '(value: [Action, State], index: number) => ObservableInput<{}> 类型的参数'. 类型 'void' 不可分配给类型 'ObservableInput<{}>'.

import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/withLatestFrom';
import { HttpClient, HttpRequest } from '@angular/common/http';
import { Store, Action } from '@ngrx/store';
import { tap, mergeMap, map } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';

import * as PropertyActions from '../actions/property.actions';
//import { Recipe } from '../recipe.model';
import * as fromPropertyReducer from '../reducers/property.reducer';
import * as fromApp from '../store/app.reducer';
import { AuthService } from '../user/auth.service';


@Injectable()
export class PropertyEffects {

    constructor(
        private actions$: Actions,
        private httpClient: HttpClient,
        private store: Store<fromApp.AppState>,
        private authService: AuthService
    ){}

    @Effect()
    sendMessage(): void {
    // POST
        this.actions$//.pipe(
        .ofType(PropertyActions.FETCH_ALL_PROPERTIES)
        .withLatestFrom(this.store.select('propertyState'))
        .switchMap((action) => {

            this.authService.getAuthenticatedUser().getSession((err, session) => {
                if (err) {
                return;
                }

                const req = new HttpRequest('POST', 'https://yxalbf1t6l.execute-api.us-east-1.amazonaws.com/dev/todos', 
                    //state.properties, 
                    { "text": "Testing10", "checked": true, "properties": [{"c":6},{"b":7}] },
                    {reportProgress: true},
                );
                return this.httpClient.request(req)
            }).pipe(
                    // If successful, dispatch success action with result
                    map(data => {
                        console.log(`Success ${JSON.stringify(data)}, 0, 2)`);
                        //return { type: PropertyActions.OPEN_ALL_PROPERTIES, payload: data }
                        //return { type: 'LOGIN_SUCCESS', payload: data }
                        return new PropertyActions.OpenAllProperties(data)
                    })
            )
        })
}

那么我的第二个问题是我想像在 http 请求中一样插入 header 但使用 httpclient。如何做到这一点

this.http.post('https://API_ID.execute-api.REGION.amazonaws.com/dev/compare-yourself', data, {
        headers: new Headers({'Authorization': session.getIdToken().getJwtToken()})
      })

Answer 1

您需要从您的效果中发送一个动作。因此，指定 void 的 return 不是有效选项，除非您明确指示 ngrx 您不想 return 一个操作。

根据文档，"Observables decorated with the @Effect() decorator are expected to be a stream of actions to be dispatched. Pass { dispatch: false } to the decorator to prevent actions from being dispatched."

请看一下来自 ngrx documentation 的这个例子。

class MyEffects {
  constructor(private actions$: Actions, private auth: AuthService) { }

  @Effect() login$: Observable<Action> = this.actions$
    .ofType('LOGIN')
    .switchMap(action =>
      this.auth.login(action.payload)
        .map(res => ({ type: 'LOGIN_SUCCESS', payload: res }))
        .catch(err => Observable.of({ type: 'LOGIN_FAILURE', payload: err }))
    );

  @Effect() logout(): Observable<Action> {
    return this.actions$
      .ofType('LOGOUT')
      .switchMap(() =>
        this.auth.logout()
          .map(res => ({ type: 'LOGOUT_SUCCESS', payload: res }))
          .catch(err => Observable.of({ type: 'LOGOUT_FAILURE', payload: err }))
      );
  }
}

ngrx 效果中 Angular 5 服务的用户

user of Angular 5 service in ngrx effect

angular

angular-services

ngrx

ngrx-effects