标签: ngrx

想象一下,我的数据库中有很多条目(比如用户).我还有两个路由,一个用于列表,另一个用于详细信息(您可以在其中编辑条目).现在我正在努力解决如何处理数据结构问题.

我正在考虑两种方法和两者的有点组合.

共享数据集

• 我导航到/list,我的所有用户都是从存储在redux存储中的api下载的,在键下users,我还添加了一些 users_offset并且users_limit只渲染部分列表
• 然后我浏览到/detail/<id>,并存储currently_selected_user与<id>作为VAL ...这意味着我将能够与这样的事情让我的用户的数据users.find(res => res.id === currently_selected_user)
• 更新也很简单,因为我只使用一个数据集和指向它的细节
• 添加新用户也很简单,再次使用相同的用户列表

现在我用这种方法遇到的问题是,当用户列表变得庞大(比如数百万)时,下载可能需要一段时间.而且,当我直接导航时/detail/<id>,我还没有下载所有用户,所以为了获得我需要的数据,我将不得不先下载整个内容.数百万用户只需编辑一个.

分离的数据集

• 我导航到/list,而不是从api下载我的所有用户,我只下载了几个,取决于我users_per_page和users_current_page将要设置的,我可能会将数据存储为users_currently_visible
• 然后我浏览到/detail/<id>,存储currently_selected_user与<id>作为VAL ...和,而不是搜索通过users_currently_visible我只是从API下载用户的数据..
• 在更新时,我不会users_currently_visible以任何方式更新
• 我也不会补充

我认为这里可能存在的问题是,在访问时我将不得不/list再次从api下载数据,因为它可能与数据库中的内容不同步,我也可能不必要地详细下载用户数据,因为他们可能偶然已经在我的内心users_currently_visible

某种frankenstein-y shenanigans

• 我详细说明,我和分离数据集一样,但不是直接从api下载用户数据,我首先检查:
  • 我有没有？ users_currently_visible
  • 如果是这样,是否有一个用户在我们之间有我的身份？如果两者都是真的,那么我将其用作我的用户数据,否则我进行api调用
• 同样在更新时发生,我检查我的用户是否存在,users_currently_visible如果是,我也更新该列表,如果不是我什么都不做

这可能会奏效,但并不觉得这是正确的方法.我可能还需要下载users_currently_visible访问时的新清单/list,因为我可能添加了一个新的...

有没有粉丝喜欢的方式这样做？...我敢肯定每一个redux用户都必须遇到同样的事情.

谢谢!

下面是Ngrx示例中的代码:https://github.com/ngrx/example-app/blob/master/src/effects/book.ts我的问题是为什么在第一个@Effect中,它switchMap会在其他人使用时使用mergeMap.这是因为第一个@Effect正在处理网络,switchMap如果它正在运行,您可以取消之前的网络请求吗？

@Effect() search$ = this.updates$
    .whenAction(BookActions.SEARCH)
    .map<string>(toPayload)
    .filter(query => query !== '')
    .switchMap(query => this.googleBooks.searchBooks(query)
      .map(books => this.bookActions.searchComplete(books))
      .catch(() => Observable.of(this.bookActions.searchComplete([])))
    );


  @Effect() clearSearch$ = this.updates$
    .whenAction(BookActions.SEARCH)
    .map<string>(toPayload)
    .filter(query => query === '')
    .mapTo(this.bookActions.searchComplete([]));


  @Effect() addBookToCollection$ = this.updates$
    .whenAction(BookActions.ADD_TO_COLLECTION)
    .map<Book>(toPayload)
    .mergeMap(book => this.db.insert('books', [ book ])
      .mapTo(this.bookActions.addToCollectionSuccess(book))
      .catch(() => Observable.of(
        this.bookActions.addToCollectionFail(book)
      ))
    );


  @Effect() removeBookFromCollection$ = this.updates$
    .whenAction(BookActions.REMOVE_FROM_COLLECTION)
    .map<Book>(toPayload)
    .mergeMap(book => this.db.executeWrite('books', 'delete', [ book.id ])
      .mapTo(this.bookActions.removeFromCollectionSuccess(book))
      .catch(() => Observable.of( …

我正在研究一个有角度的1.xx项目,并考虑将我的代码升级为angular 2.

现在在我的项目中,我有许多服务(工厂)来处理数据,几乎将数据保存在js数组(缓存和存储)中,并使用下划线处理数组来处理这些数据.

我在angular2中使用ngrx发现了很多例子.

使用商店比较使用数据服务处理数据有什么好处？

如果我有多种数据类型(库存,订单,客户......),我的应用程序是否需要多个商店？

如何构建(设计)我的应用程序来处理这些多种数据类型？

我参考了路由器商店的ngrx项目(https://github.com/ngrx/router-store).

我不清楚如何使用这个项目......

例如,让我们从项目文档中获取以下示例:

store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));

这是否意味着用作角2路由器的替代品:router.navigate(['/path...？

...或者我应该仅在某些情况下使用ngrx路由器存储？(如果是那些？)

当<a routerLink="/heroes"点击角度2路由器html链接时,ngrx路由器存储会发生什么 ？

更一般地说,与使用普通的角度2路由器相比,有人可以解释一下ngrx路由器商店项目所取得的成果吗？

或者换句话说,除了角度2路由器之外,ngrx路由器商店还带来了什么？

编辑:关于ngrx的有趣的信息和样本来源当然是ngrx example-app(https://github.com/ngrx/example-app).

我发现了对路由器存储的依赖,但我无法找到应用程序中路由器存储的使用位置...

仅供参考,这里是关于路由器商店的示例应用程序中的注释:

@ ngrx/router-store使路由器状态在商店中保持最新,并将商店用作路由器状态的唯一真实来源.

使用ui-router-ng2而不是新的Angular2路由器有什么好处和缺点？在过去,我使用ui-router和Angular 1.x而不是使用ngRoute,因为我需要更好地支持嵌套状态/路由.

那么现在,Angular2呢？我想听听你的意见,以便我能评估这两个机会.

此外,搜索和搜索谷歌我发现ngrx /路由器,我不知道.你能告诉我Angular2 的内置路由器,Angular2和ngrx路由器的新ui路由器之间有什么区别吗？

我开始关注ngrx Store,看到使用Angular异步管道的便利性.同时我不确定是否大量使用Angular异步管道是一个不错的选择.

我举一个简单的例子.让我们假设在同一模板中我需要显示从Store检索的对象(例如Person)的不同属性.

一段模板代码可以

<div>{{(person$ | async).name}}</div>
<div>{{(person$ | async).address}}</div>
<div>{{(person$ | async).age}}</div>

而组件类构造函数将具有

export class MyComponent {
  person$: Observable<Person>;

  constructor(
    private store: Store<ApplicationState>
  ) {
      this.person$ = this.store.select(stateToCurrentPersonSelector);
  }
.....
.....
}

据我所知,这段代码暗示了3个订阅(通过异步管道在模板中制作)到同一个Observable(person$).

另一种方法是person在MyComponent中定义1个property()并且只有1个订阅(在构造函数中)填充属性,例如

export class MyComponent {
  person: Person;

  constructor(
    private store: Store<ApplicationState>
  ) {
      this.store.select(stateToCurrentPersonSelector)
                .subscribe(person => this.person = person);
  }
.....
.....
}

而模板使用标准属性绑定(即没有异步管道),例如

<div>{{person.name}}</div>
<div>{{person.address}}</div>
<div>{{person.age}}</div>

现在的问题

这两种方法在性能方面有什么不同吗？是否大量使用异步管道(即大量使用订阅)会影响代码的效率？

在调用Web服务之前,我的服务类需要获取dataForUpdate从我的状态调用的属性.目前,我这样做:

constructor ( public _store: Store<AppState>, 
              public _APIService:APIService) {

    const store$ =  this._store.select ('StateReducer');

    .../...

    let update = this.actions$.filter ( action => action.type==UPDATE )
                              .do( (action) => this._store.dispatch({type: REDUCER_UPDATING, payload : action.payload  }) )
      *** GET STATE ***==>    .mergeMap ( action => store$.map ( (state : AppState)=> state.dataForUpdate ).distinctUntilChanged(),
                                         (action, dataForUpdate) { 
                                                   return { type:action.type, payload : {employee:action.payload, dataForUpdate :dataForUpdate }    }; 
                                                            })
       * AND CALL API *==>    .mergeMap ( action =>this._APIService.updateEmployee(action.payload.employee, action.payload.dataForUpdate),
                                         (action, APIResult) => { return …

我正在使用ngrx/store 1.5以及thunk中间件的应用程序,我正在尝试移动到ngrx/store 2.0和ngrx/effects.关于如何处理多个相关的动作和/或效果,我有几个问题.

我意识到thunks vs effect的"心态"是不同的,我试图了解差异.我已经查看了可用的示例应用程序,并且没有找到任何看起来适合我正在尝试的内容,所以也许我仍然接近它完全错误.

场景1

以下是处理向服务器发出登录请求的副作用:

@Effect login$: any = this.updates$
    .whenAction(LoginActions.LOGIN)
    .map(toPayload)
    .switchMap(payload => 
        this.loginService.login(payload.user, payload.password)
            .map(result => this.actions.loginSuccess(value))
            .catch((error) => Observable.of(this.loginError(error)))
));

鉴于最初的副作用,成功登录时触发导航到"主页"屏幕的"正确"或"建议"方式是什么？这也可以概括为简单地触发一系列动作或操作.

我考虑过几个选项:

(a)登录成功触发的另一个效果,即触发后续动作以触发导航？

@Effect navigateHome$: any = this.updates$
    .whenAction(LoginActions.LOGIN_SUCCEEDED)
    .mapTo(this.actions.navigateHome());

(b)登录成功触发的另一个效果,即执行导航操作？

@Effect navigateHome$: any = this.updates$
    .whenAction(LoginActions.LOGIN_SUCCEEDED)
    .do(this.navigateHome())
    .filter(() => false);

(c)将额外行动与初始登录效果所发出的行动联系起来？(样本显然不太正确,但给出了想法)

@Effect login$: any = this.updates$
    .whenAction(LoginActions.LOGIN)
    .map(toPayload)
    .switchMap(password => Observable.concat(
        this.loginService.login(passcode)
            .map(result => this.actions.loginSuccess(value))
            .catch((error) => Observable.of(this.loginError(error))),
        Observable.of(this.actions.navigateHome())
    ));

(d)其他？

情景2

考虑需要按顺序进行多个请求的情况,并且随着每个请求开始,我们想要更新"状态"以便可以向用户提供反馈.

这些行中某事的thunk示例:

multiphaseAction() {
    return (dispatch) => {
        dispatch(this.actions.updateStatus('Executing phase 1'); …

我没有找到有关此库的任何有用信息或它的目的是什么.似乎ngrx/effects向已经了解这个概念的开发人员解释了这个库,并提供了一个关于如何编码的更大的例子.

我的问题:

1. 什么是行动的来源？
2. ngrx/effects库的目的是什么;仅使用ngrx/store的缺点是什么？
3. 什么时候建议使用？
4. 它是否支持角度rc 5+？我们如何在rc 5+中配置它？

谢谢!

究竟是什么意思是这三个点以及为什么我需要它们？

export function leadReducer(state: Lead[]= [], action: Action {
    switch(action.type){
        case ADD_LEAD:
            return [...state, action.payload];
        case REMOVE_LEAD:
            return state.filter(lead => lead.id !== action.payload.id )
}
}