Javascript Angular 8使用NgRx从http设置状态

我的目标：用“NgRx”方式更新我的服务文件

我正在发出GET请求从我的服务中获取菜单数据，一旦调用发生，我希望它在NgRx中设置我的“菜单”状态，以便我可以在任何地方访问菜单数据

我不知道最好的方法是什么

我当前的代码：

菜单.服务.ts

  constructor(private http: HttpClient, private store: Store<fromApp.AppState>) { }

  public getMenu(): Observable<Restaurant> {
    // not sure where to run this code:
    // this.store.dispatch(new MenuActions.SetMenu(menu));

    return this.http.get<Menu>('http://localhost:1234/api/menu');
  }

构造函数（私有http:HttpClient，私有存储：store）{
public getMenu（）：可观察{
//不确定在何处运行此代码：
//this.store.dispatch（new MenuActions.SetMenu（menu））；
返回此.http.get（'http://localhost:1234/api/menu');
}

问题：

1.）在我的服务中发送菜单项是最佳做法吗

2.）我是否应该在呼叫后使用“管道”操作符发送更新

3.）如果我正在使用NgRx，我觉得我不需要订阅

getMenu（）

，因为状态将在此文件中设置，我可以访问通常订阅此服务的状态。在这里使用服务文件是有效的，还是我对ngrx采取了错误的方法？如果这是不正确的，有什么替代方案

谢谢

在我的服务中发送菜单项是最佳做法吗

你可以，但我不推荐，因为NGRX有效果。Effect代表做一些逻辑计算的副作用

我是否应该在呼叫后使用“管道”操作符来发送更新

你不应该

如果我使用的是NgRx，我觉得我不需要订阅getMenu（），因为状态将在此文件中设置，我可以访问通常订阅此服务的状态。在这里使用服务文件是有效的，还是我对ngrx采取了错误的方法？如果这是不正确的，有什么替代方案

你不应该。相反，在您的组件中这样订阅

  public posts$: Observable<IPost[]>;

  constructor(private store: Store<PostState>) {}

  ngOnInit() {
    this.store.dispatch(LoadPosts());
    this.posts$ = this.store.pipe(select(selectAllPosts));
  }

<div class="row">
  <div class="col-3" *ngFor="let post of posts$ | async">
    <div class="card card-container">
      <div class="card-body">
        <h5 class="card-title">{{ post.title }}</h5>
        <p class="card-text">{{ post.body }}</p>
        <a
          class="btn btn-outline-primary"
          [routerLink]="['/posts/',post.id]"
          role="button"
          >Go to detail</a
        >
      </div>
    </div>
  </div>
</div>

export const selectPostState = createFeatureSelector<PostState>(
  POST_FEATURE.storekey
);

export const selectPostsEntities = createSelector(
  selectPostState,
  posts => posts.entities //object look up
);

export const selectAllPosts = createSelector(
  selectPostsEntities,
  posts => Object.keys(posts).map(key => posts[key]) // use *ngFor
);

范例

我有这样的服务

  getPosts(): Observable<any> {
    return this.http.get("https://jsonplaceholder.typicode.com/posts");
  }

所以在我的容器组件中

  public posts$: Observable<IPost[]>;

  constructor(private store: Store<PostState>) {}

  ngOnInit() {
    this.store.dispatch(LoadPosts());
    this.posts$ = this.store.pipe(select(selectAllPosts));
  }

<div class="row">
  <div class="col-3" *ngFor="let post of posts$ | async">
    <div class="card card-container">
      <div class="card-body">
        <h5 class="card-title">{{ post.title }}</h5>
        <p class="card-text">{{ post.body }}</p>
        <a
          class="btn btn-outline-primary"
          [routerLink]="['/posts/',post.id]"
          role="button"
          >Go to detail</a
        >
      </div>
    </div>
  </div>
</div>

export const selectPostState = createFeatureSelector<PostState>(
  POST_FEATURE.storekey
);

export const selectPostsEntities = createSelector(
  selectPostState,
  posts => posts.entities //object look up
);

export const selectAllPosts = createSelector(
  selectPostsEntities,
  posts => Object.keys(posts).map(key => posts[key]) // use *ngFor
);

public posts$：可见；
构造函数（私有存储：存储）{}
恩戈尼尼特（）{
this.store.dispatch（LoadPosts（））；
this.posts$=this.store.pipe（select（selectAllPosts））；
}
{{post.title}}
{{post.body}
详细说明

当然，您需要选择器来获取组件中的数据

  public posts$: Observable<IPost[]>;

  constructor(private store: Store<PostState>) {}

  ngOnInit() {
    this.store.dispatch(LoadPosts());
    this.posts$ = this.store.pipe(select(selectAllPosts));
  }

<div class="row">
  <div class="col-3" *ngFor="let post of posts$ | async">
    <div class="card card-container">
      <div class="card-body">
        <h5 class="card-title">{{ post.title }}</h5>
        <p class="card-text">{{ post.body }}</p>
        <a
          class="btn btn-outline-primary"
          [routerLink]="['/posts/',post.id]"
          role="button"
          >Go to detail</a
        >
      </div>
    </div>
  </div>
</div>

export const selectPostState = createFeatureSelector<PostState>(
  POST_FEATURE.storekey
);

export const selectPostsEntities = createSelector(
  selectPostState,
  posts => posts.entities //object look up
);

export const selectAllPosts = createSelector(
  selectPostsEntities,
  posts => Object.keys(posts).map(key => posts[key]) // use *ngFor
);

导出常量selectPostState=createFeatureSelector( POST_FEATURE.storekey ); 导出常量SelectPostSenties=createSelector( 选择PostState， posts=>posts.entities//对象查找 ); export const selectAllPosts=createSelector( 选择Postsenties， posts=>Object.keys（posts.map）（key=>posts[key]）//使用*ngFor );

---

省去ngrx的麻烦，用理智的方式去做，你应该使用ngrx效果来处理副作用-非常诱人@AdrianBran，这是一个麻烦