Question

我有一个PostListComponent，它遍历从服务器检索到的所有帖子，并显示单个PostItemComponent。我正在使用NGXS进行状态管理。当我启动fetchPosts请求时，我更改了state属性loading：true。请求成功完成后，我将其更改回false。如果请求失败，我将更新状态上的错误对象，并更新错误对象的消息属性和异常属性。

这是我到目前为止所拥有的

`
export class PostListComponent implements OnInit {    
  private posts$: Observable<any> = this.store.select(state => state.posts);
  private isLoading: boolean = false;
  private error: object = {};

  constructor(
    public postsFacade: PostsFacadeService,
    public moviesFacade: MoviesFacadeService,
    private store: Store) {    
  }

  ngOnInit() {
    this.posts$.subscribe(
      (state) => this.onLoadingEvent(state)
      );

    this.posts$.subscribe(
      (error) => this.onErrorEvent(error)
    )
    // this.posts$.pipe(
    //   mergeMap(() => {
    //     // perform the subscription here and listen for state changes
    //   })
    // )

  }

  onErrorEvent(error)
  {
    this.error = error.error;
  }

  onLoadingEvent(state)
  {
    this.isLoading = state.loading;  
  }
`

我的商店的结构

`
@State<PostStateModel>({
    name: 'posts',
    defaults: {
        posts: [],
        loading: false,
        error: {
          message: "",
          error: ""                   
        },
    }
})
`

我觉得也许使用rxjs mergeMap运算符可以更好地订阅商店中的状态更改。我不确定这是否可行以及当前的方法是否有效。我还能如何订阅和响应以从组件内部存储更改？

Answer 1

几件事：

您需要为状态类定义一些状态操作-例如LoadPosts。
您应该分派该操作（例如在ngOnInit中），或者在加载组件之前的某个位置。该操作应调用实际获取数据的服务，从而从组件中消除这种依赖性。
如果服务使用Observables或Promises，则当它们最终返回时，应通过更新此时的状态来处理。
您可以通过@Select创建可观察对象。请注意，以这种方式键入它。

@Select（PostState）postState $：可观察；
您可以在组件中使用异步管道，并且您可能不需要直接在代码中订阅postState $（例如，使用* ngFor遍历帖子）。
由于您的状态包括发布，加载标志和错误，因此，总体上订阅该状态将使您的订阅功能或异步管道运行，无论这些更改中的哪一个都行。如果您在状态类中使用@Selector（）创建选择器方法，则可以订阅这些方法以获得更细的粒度，例如仅对加载标志做出反应。

对加载或错误事件中组件内ngxs状态变化做出反应的最佳方法是什么？

1 个答案: