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

Question

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

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

Answer 1

只有recommended才应该将可序列化的内容放入store：

强烈建议您只将普通的可序列化对象、数组和原语放入您的存储中。 技术上可以将不可序列化的项目插入到 store 中，但这样做会破坏持久化和重新水化 store 内容的能力，并干扰时间旅行调试。

AngularFire2 可观察对象的异步特性意味着您可能希望使用 @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() }))
  );

但是，如果您想收听来自 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 操作等。

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