angular - 关于从 NgRx 存储中选择数据的问题

Question

@Component({
  selector: 'app-user',
  styleUrls: ['./user.component.css'],
  template: `
    <button (click)="clickSearch('some keyword')">Search</button>

    <div *ngIf="books$ | async as books">

      <h5 *ngIf="hasSearched">No. of books: {{ books.length }}</h5>

      <p *ngIf="hasSearched && !books.length">No books found</p>

      <p *ngIf="!hasSearched">Please enter a search keyword to start searching for books.</p>

      <h2 *ngFor="let book of books">{{ book.title }}</h2>

    </div>
  `
})
export class UserComponent {

  constructor(private store: Store) {}

  hasSearched: boolean = false;

  books$ = this.store.select(BooksSelector.getBooks)
             .pipe(
               tap(data => console.log(data))
             );

  clickSearch(keyword: string) {

    this.hasSearched = true;

    this.store.dispatch(BooksActions.loadBooksFromApi(
      { q: keyword }
    ));

  }
}

假设我有一个简化的 Angular 组件代码，如上所示。流程:

1. 当我们第一次到达此页面时，store.select() 语句立即从存储中返回初始状态值，即 []。这将导致模板显示“未找到书籍”和“书籍数量=0”消息，这是我不想要的。因此，为了防止这种情况，我添加了 hasSearched bool 属性并显示“请输入...”消息。

2. 单击“搜索”按钮后，hasSearched 属性将变为 true，并且当 API 检索数据时，模板将显示“未找到图书” ”和“书籍数量=0”的简短消息。我不希望它这样做。我希望消息能够等待(通过隐藏)直到 API 调用完成。

3. API 调用完成后，图书列表正常显示在模板中，并且消息正确显示。

4. 当用户搜索完某些内容并获得一些结果，然后离开页面并返回页面后，store.select() 语句将返回先前存储的值。我不想要这个。我只是希望此页面重新开始，没有书籍列表，只有消息“请输入搜索关键字以开始搜索书籍。”。

我的问题是针对第 2 点和第 4 点:

对于第 2 点，我应该添加另一个 bool 属性来检查加载状态吗？似乎 *ngIf 标志太多。有没有更优雅的方法通过 NgRx 选择器来处理这个问题？

对于第 4 点，我该如何实现这一目标？是通过在 ngOnDestroy() 期间向存储推送一个空的 [] 来强制清除 Books 状态吗？

Answer 1

对于点 2

我建议在您的 reducer 中添加另一个 bool 值 hasSearched: boolean ，并从组件中删除 hasSearched 。使用组件中的选择器订阅 hasSearched。当用户第一次进入组件时，它应该是未定义。由此，您可以显示您的消息

   <p *ngIf="(hasSearched | async) === undefined">
       Please enter a search keyword to start searching for books.
   </p>

当用户单击按钮时，您将调度您的操作 BooksActions.loadBooksFromApi。在同一操作/ reducer 中，当 API 调用正在进行时，将字段 hasSearched 转换为 false，此 false 标志将阻止显示这两条消息:

<h5 *ngIf="(hasSearched | async)">No. of books: {{ books.length }}</h5>

<p *ngIf="(hasSearched | async) && !books.length">No books found</p>

在完成时将其设置为true。作为引用，您的状态和 reducer 将如下所示。

    export interface BooksState {
       books: any;
       hasSearched: boolean;
    }

    export const initialState: BooksState = {
       books: undefined,
       hasSearched: undefined
    };

reducer 的情况看起来像这样。

    case BooksActionsTypes.loadBooksFromApi:
      return {
        ...state,
        hasSearched: false
     };

    case BooksActionsTypes.loadBooksFromApiSuccessful:
      return {
        ...state,
        books: action.payload.books
        hasSearched: true
     };

对于第 4 点

您的想法在我的理解中是正确的，通过在 ngOnDestroy() 上调度操作来清除状态。这与我使用的方式相同，当我想在下次访问同一组件时获得新的状态时，可以清除状态。这将类似于我在下面写的内容

    case BooksActionsTypes.ClearState:
      return {
        ...state,
        books: undefined
        hasSearched: undefined
       };