代码之家 › 专栏 › 技术社区 › Abdul Ahmad

角度-如何从ngrx获取状态,然后执行http

ngrx-store ngrx angular

Abdul Ahmad · 技术社区 · 7 年前

我在一个服务上有一个方法,我需要从redux存储中获取一些数据,并在http请求中使用它,但是我总是得到错误或 http请求未执行,我正在尝试:

class SettingService {
 updateSettings({ settings }) {
  return this.store.select(s => s.settings).map((state: any) => {
    const { id } = state.data;

    return this.http.put('route/' + id, { settings }).pipe(map((response: any) => {
      const { data } = response;
      this.store.dispatch(new GetSettingsSuccess({ data }));
      return data;
    })).pipe(catchError(this.errorHandlerService.handleError));
  });
 }
}

我犯的错误是

属性“map”不存在于“可观察”类型上

我使用它的方法是将服务导入到组件中,然后:

this.settingService.updateSettings({ settings }).subscribe();

方法被调用,但由于某种原因,http请求没有发生。我也应该订阅http请求吗?或者我应该使用pipe而不是map并给它多个操作符?

3 回复 | 直到 7 年前

Aragorn 7 年前

以下是您可能要尝试的伪代码:

 updateSettings({ settings }) {
   // use store select through a reducer:
    return this.store.select('your_reducer_here').subscribe( state => {
      //get id from your state  
      const id = state.data;

      //use that id in your http call
      return this.http.put('route/' + id, { settings }).pipe(map((response: any) => {
        const { data } = response;
        this.store.dispatch(new GetSettingsSuccess({ data }));
        return data;
      })).pipe(catchError(this.errorHandlerService.handleError));
    });
    })
}

frido 7 年前

你应该在一个 pipe . 使用 switchMap (甚至 mergeMap )将存储输出映射到Http请求中的可观察对象,然后在各自的运算符中执行其他任务。这样可以得到更清晰的代码。

应该是这样的:

updateSettings({ settings }) {
  return this.store.select(s => s.settings)
    .pipe(
      // map the state from your store to the http request
      switchMap((state: any) => this.http.put('route/' + state.data.id, { settings })),
      // map the http response to the data your care about
      map((response: any) => response.data),
      // execute any other task with that data
      tap(data => this.store.dispatch(new GetSettingsSuccess({ data }))),
      // catch errors if they occurr
      catchError(this.errorHandlerService.handleError),   
    );

然后订阅返回的observate,并在发出存储的值后执行http请求。

this.settingService.updateSettings({ settings }).subscribe(
  // you'll have access to your data from the http response here
  data => doSomething(data) 
);

J. S. 7 年前

你在这里调用可观测的地图 this.store.select(s => s.settings).map((state: any) 你需要使用 pipe(map()) . 在这一行,你做得对: return this.http.put('route/' + id, { settings }).pipe(map((response: any)