Question

我正在使用ngrx / effects开发角度REST应用程序，我正在使用示例应用程序GIT。我试图从http REST端替换效果中的硬编码json数据。我收到错误“效果”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>
) {}
}

我使用json-server作为REST端点。 json-server --port 4000 --watch expt-results-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 })
      );
    })

进行ngrx效果REST调用

1 个答案: