进行 ngrx-effects REST 调用

Posted 2023-03-27

【中文标题】进行 ngrx-effects REST 调用

【英文标题】：Making ngrx-effects REST call

【发布时间】：2018-04-18 04:09:42

【问题描述】：

我正在使用 ngrx/effects 开发 Angular REST 应用程序，我正在使用示例应用程序 GIT。我正在尝试从 http REST 端替换硬编码的 json 数据。我收到错误 "Effect "GetTodoEffects.todo$" dispatched an invalid action" 。你能帮我解决它吗？一切都与 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-results-sample.json

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

【参考方案1】：

我怀疑的第一件事是数组。尝试将其更改为 observable。

  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 )
      );
    )

【讨论】：

非常感谢。我正在收到回复。

但是，在 catch 块中，我收到了这个错误 - “错误 TS2339：“typeof Observable”类型上不存在属性“of”。”

尝试在文件顶部添加import 'rxjs/add/observable/of';。

谢谢梅丽吉。我在显示 json 数据时遇到了一些问题。我发布了新问题 - ***.com/questions/47153196/…。你能帮帮我吗？

没问题。完成:)