angular - NGRX - 使用哈希而不是数组作为状态

Question

实际上我正在使用 NGRX(Redux for Angular)。一开始，我开始将我的实体作为数组存储在我的状态中。阅读一些文章后，我想将我的实体存储为散列，同时我认为使用 id 访问实体的实体比过滤数组更高效。

但我实际上不确定是否以正确的 ngrx 方式这样做。

请随意检查我的(工作 - 但最佳实践？)示例: Ngrx Articles Sample

在articles.component 中，您将找到一个articleReducer 和一个ArticlesComponent，它们将使用商店获取所有文章并获取一篇具体文章。

对于每个不确定的部分，我都用问题 x - ... 进行评论

如果您不想检查完整的示例，请参阅以下问题片段:

问题0:

export const initialState: ArticleState = {
  foo: 'bar',
  articlesById: [], // QUESTION 0: What is a good usecase to hold an array with the id's when Object.keys(hash) will give the same?
  articleEntities: {}
}

问题 1 + 2:

case GET_ALL_ARTICLES: {

// QUESTION 1: is this a good choice? Or is there a better alternative to create the hash?
   const articleHash: { [id: number]: Article} = {};
   action.payload.forEach(article => articleHash[article.id] = article);

  return {
    ...state,

    // QUESTION 2: is this a good choice? Or is there a better alternative?
    articlesById: action.payload.map(article => article.id),
    articleEntities: articleHash
  }
}

问题3:

// QUESTION 3 - Getting all articleEntities as Array for ngFor : is this a      good choice? Or is there a better alternative?    
  this.articles$ = this.store.pipe(
    select('articles', 'articleEntities'),
    map(entities => Object.keys(entities).map(id => entities[id]))
  );

问题4:

const givenIdByRouterMock = 2;
// QUESTION 4 - Getting one concrete Article for given id : is this a good choice? Or is there a better alternative?    
this.article$ = this.store.pipe(
  select('articles', 'articleEntities'),
  map(entities => entities[givenIdByRouterMock])
);

如果我将使用新操作更新某些文章(例如 id 2)，我希望包含该文章的组件也将被更新。

这是有效的变体还是有更好的选择、解决方案？请随意将 stackblitz 示例与其他变体/代码片段 fork 。

谢谢!

Answer 1

Q0:ids 属性可用于指示排序。另一点是，如果您删除一个实体，只需从 this 数组中删除它就足够了，与从字典中删除它相比，这是一个更简单的任务。

Q1:你的解决方案有效，我更喜欢使用reduce

Q2:没关系

return {
  products: action.payload.products.reduce((dict, product) => {
    dict[product.sku] = product;
    return dict;
  }, {}),
  productSkus: action.payload.products.map(product => product.sku),
};

Q3:在选择器中，您确实应该将其转换为数组。如果您使用 ids 属性(请参阅答案1)，您应该使用 ids.map(id =>Entity[id])。

Q4:确实要选择特定实体，请使用entities[id]

额外:

• NgRx 有一个包 @ngrx/entity以这种方式处理状态 - unsorted_state_adapter.ts -state_selectors.ts

• 我认为您应该看看 NgRx selectors，而不是使用 this.store.pipe(select('articles', 'articleEntities')) 选择数据。恕我直言，这更干净。

• 自 Angular 6.1 起，您还可以通过键值管道在字典上使用 ngFor。

.

<mat-nav-list>
      <a *ngFor="let member of familyMembers | async | keyvalue" 
        mat-list-item [routerLink]="['/groceries', member.key]"> 
          {{ member.value.avatar }} {{member.value.name}} 
      </a>
</mat-nav-list>