Question

我的问题是关于redux商店中分页数据形状的this优秀问答的延续。我在一个有角度的2应用程序中使用ngrx / store。

{
  entities: {
    users: {
      1: { id: 1, name: 'Dan' },
      42: { id: 42, name: 'Mary' }
    }
  },
  visibleUsers: {
    ids: [1, 42],
    isFetching: false,
    offset: 0
  }
}

基于上述形状，我相信如果来自传入请求有效负载的偏移量（或页面，排序等）发生了变化，那么可见用户将通过调用DB来改变用户实体。我有一些动作和reducer函数来处理它，它按预期工作。如果偏移量保持不变，并且用户以离开方式返回页面，那么应该由商店而不是数据库返回用户实体。

我正在努力是放置逻辑以及使用哪些rxjs运算符（仍在学习这个）。

我认为正确的地方是一种效果。以下是我现在在angular2应用程序中的内容（我正在注入Actions，Store和我的UserService），每次加载页面时都会提取新数据。

@Effect loadUsers$ = this.actions$
     .ofType('LOAD_USERS')
     .switchMap(() => this.userService.query()
         .map((results) => {
             return new LoadUsersSuccessAction(results);
         }))
     .catch(() => Observable.of(new LoadUsersFailureAction()));

我最好的想法是这样的：

@Effect loadUsers$ = this.actions$
     .ofType('LOAD_USERS')
     .withLatestFrom(this.store.select(state => state.visibleUsers.offset))
     .switchMap(([action, state]) => {
         //something that looks like this??
         //this syntax is wrong and I can't figure out how to access the action payload
         state.offset === payload.offset 
            ? this.store.select(state => state.entities.users) 
            : this.userService.query()
         }
         .map((results) => {
             return new LoadUsersSuccessAction(results);
         }))
     .catch(() => Observable.of(new LoadUsersFailureAction()));

不确定如何使这项工作。谢谢。

Answer 1

我不想回答我自己的问题，但我花了很长时间才找到答案。我不接受这个答案，因为我不确定这是解决问题的最佳方式（仍在学习输入/输出）。但它确实很有效。

我在github gist中找到了正确的语法。此代码与我的示例不符，但它清楚地演示了条件ngrx效果的＃34; 2选项＆＃34;通过使用某种条件返回商店或api observable。

希望这有助于某人。

这是：

shelve

如何在angular2应用程序中使用ngrx-effects从商店返回分页数据或从api服务返回新数据？

1 个答案: