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

Question

我开始学习 angular2 并开始学习 ngrx/store(以前没有使用 redux 的 exp)和 firebase 应用程序。现在，我不知道如何在商店中存储 firebase 对象、数组和其他东西。我是否应该按原样放置它们，例如，将这个 FirebaseListObservable 放在商店 af.database.list('/items') 中？它看起来很合适(组件可以只执行 store.select('items') 并且模板可以订阅它，并且对于突变我仍然可以将事件触发到商店，在那里我会用 reducer 改变列表)但我的猜测是不是因为这个列表可以从商店外改变(一些其他订阅相同列表的应用程序用户)。还是应该视具体情况而定？

如果不是，我应该在哪里存储对该 firebase 对象的引用以及我应该在商店中放入什么？

Answer 1

是recommended只应将可序列化的内容放入商店:

It is highly recommended that you only put plain serializable objects, arrays, and primitives into your store. It's technically possible to insert non-serializable items into the store, but doing so can break the ability to persist and rehydrate the contents of a store, as well as interfere with time-travel debugging.

AngularFire2 observable 的异步特性意味着您可能希望使用 @ngrx/effects 来集成它们. Effects 本质上是监听一个特定的 Action ，执行一些(可能是异步的)副作用，然后(通常)发出另一个 Action 。

你如何做取决于你想做什么。

例如，如果您希望使用 FirebaseListObservable 执行查询，您可以使用典型的 READ_ITEMS、READ_ITEMS_SUCCESS 和 READ_ITEMS_ERROR 像这样的 Action 和效果:

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

但是，如果您想从 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: [] })
  );

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

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