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

我有一个服务上的方法，我需要从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));
  });
 }
}

我遇到的错误是

类型“Observable”上不存在属性“map”

我使用的方法是将服务导入到组件中，然后：

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

---

方法被调用，但由于某种原因http请求没有发生。我也应该订阅http请求吗？或者我应该使用管道而不是映射，并为其指定多个运算符吗？

您可以在此处对可观察对象调用map this.store.selects=>s.settings.mapstate:任何需要使用管道映射的对象。在这一行中，您做得很好：返回这个.http.put'route/'+id，{settings}.pipemapsresponse:any

您在一个可观察对象上调用map this.store.selects=>s.settings.mapstate:any您需要使用pipemap。在这一行中，您做得很好：返回这个.http.put'route/'+id，{settings}.pipemapsresponse:any

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

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

---

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

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

---

应该在管道中链接多个操作符。使用switchMap甚至mergeMap将存储输出映射到Http请求中的可观察对象，然后在各自的操作符中执行其他任务。通过这种方式，您可以获得更干净的代码

它应该是这样的：

更新设置{settings}{ 返回this.store.selects=>s.settings 管 //将存储的状态映射到http请求 switchMapstate:any=>this.http.put'route/'+state.data.id，{settings}， //将http响应映射到您关心的数据 mapresponse:any=>response.data， //使用该数据执行任何其他任务 tapdata=>this.store.dispatchnew GetSettingsAccess{data}， //如果发生错误，则捕获错误 catchErrorthis.errorHandlerService.handleError， ; 然后订阅返回的Observable，并在发出存储中的值后执行http请求

this.settingService.updateSettings{settings}.subscribe //您可以从这里的http响应访问您的数据 数据=>doSomethingdata ;

---

您应该在一个管道中链接多个操作符。使用switchMap甚至mergeMap将您的存储输出映射到Http请求中的可观察对象，然后在各自的操作符中执行其他任务。这样您可以获得更清晰的代码

它应该是这样的：

更新设置{settings}{ 返回this.store.selects=>s.settings 管 //将存储的状态映射到http请求 switchMapstate:any=>this.http.put'route/'+state.data.id，{settings}， //将http响应映射到您关心的数据 mapresponse:any=>response.data， //使用该数据执行任何其他任务 tapdata=>this.store.dispatchnew GetSettingsAccess{data}， //如果发生错误，则捕获错误 catchErrorthis.errorHandlerService.handleError， ; 然后订阅返回的Observable，并在发出存储中的值后执行http请求

this.settingService.updateSettings{settings}.subscribe //您可以从这里的http响应访问您的数据 数据=>doSomethingdata ;

---

是的，你应该订阅你的http调用，仅仅映射是不够的。@Korfoo那么我如何从组件订阅到服务方法1次，并且ngrx选择器和http都一起运行？是的，你应该订阅你的http调用，仅仅映射是不够的。@Korfoo那么我如何从组件订阅到服务方法1次呢服务方法1次，ngrx选择器和http都一起运行？这不起作用。您从未订阅http请求，因此它不会被执行。请注意，在订阅中返回某些内容不会起任何作用。这不起作用。您从未订阅http请求，因此它不会被执行。请注意，返回som订阅中的ething没有任何作用。