使用angularfire2时在ngrx/store中存储什么？

Question

我开始学习angular2并使用ngrx/store(以前没有使用redux的exp)和firebase应用程序.现在,我无法理解如何在商店中存储firebase对象,数组和东西.我应该把它们按原样放在FirebaseListObservable商店里af.database.list('/items')吗？它看起来很合适(组件可以只做store.select('items'),模板可以订阅,对于突变,我仍然可以向商店发送事件,我会用减速器改变列表)但我的猜测是不是因为这个列表可以从商店外部变更(一些其他app用户订阅同一个列表).或者它应该取决于个案？

如果没有,我应该在哪里存储对该firebase对象的引用,以及我应该在商店中放置什么？

Answer 1

这是建议,只有序列化的内容应放在进店:

强烈建议您只将简单的可序列化对象,数组和基元放入商店.从技术上讲,可以将不可序列化的项目插入到商店中,但这样做会破坏保存和补充商店内容的能力,并且会干扰时间旅行调试.

AngularFire2 observables的异步特性意味着您可能希望使用@ngrx/effects集成它们.效果本质上是侦听特定动作,执行一些(可能是异步的)副作用,然后(通常)发出另一个动作.

你如何做到这一点将取决于你想做什么.

例如,如果你想使用FirebaseListObservable执行查询,您可以使用典型READ_ITEMS,READ_ITEMS_SUCCESS和READ_ITEMS_ERROR行动和这样的效果:

@Effect()
readItems$ = this.actions$
  .ofType('READ_ITEMS')
  .switchMap(() => this.af.database
    .list('/items')
    .first()
    .map(items => ({ type: 'READ_ITEMS_SUCCESS', payload: items }))
    .catch(() => Observable.of({ type: 'READ_ITEMS_ERROR', payload: error.toString() }))
  );

但是,如果您想从a听取实时更改FirebaseListObservable,您可能会执行以下操作:

@Effect()
refreshItems$ = this.af.auth
  .switchMap((authState) => authState ?
    this.af.database
      .list('/items')
      .map(items => ({ type: 'REFRESH_ITEMS', payload: items })) :
    Observable.of({ type: 'REFRESH_ITEMS', payload: [] })
  );

请注意,第二个效果不会侦听操作.相反,它响应身份验证状态,并REFRESH_ITEMS在用户通过身份验证后发出操作等.

在这两种情况下,受影响的操作都将包含一系列项目的有效负载 - 可以由减速器处理以存储在商店中.