搜索/过滤状态 NGXS

Question

我是NGXS的新手，并试图将其集成到一个小项目中。唯一的问题是没有搜索/过滤状态的好例子。

我的应用从后端 API 获取产品列表。它在页面上按 SKU 显示它们。我希望用户能够在输入字段中输入 SKU，并让列表在用户键入时自动筛选产品。

产品状态：

@Selector()
static getProductList(state: ProductStateModel) {
return state.products;
}
@Selector()
static prodFilter(searchObj: any[]) {
// something needs to happen here in order to filter state
}

product.component.ts：

@Select(ProductState.getProductList) products: Observable<Product[]>;
filterForm = this.fb.group({ sku: null });
constructor( private store: Store, private fb: FormBuilder ) { }
ngOnInit() {
this.store.dispatch( new GetProducts() );
}
//something in here (ngOnInit? ngOnChanges?) to pass (cloned??) product state into selector??

产品.组件.html：

<form
[formGroup]='filterForm'
novalidate
ngxsForm='products.filterForm'
(ngSubmit)='onSubmit()'
>
<input type='number' formControlName='sku' />
<button type='submit'>Submit</button>
</form>
<mat-accordion class='product-accordion'>
<mat-expansion-panel *ngFor='let product of products | async'>
<mat-expansion-panel-header>
SKU: {{ product.sku }}
</mat-expansion-panel-header>
<p>${{ product.price }}</p>
<p>{{ product.description }}</p>
</mat-expansion-panel>
</mat-accordion>

我有很多问题。我相信我不应该直接改变产品状态，所以我会克隆它吗？那么 HTML 输出会改变吗？我应该为过滤的产品创建一个新的 state.ts 文件吗？

任何帮助将不胜感激(尤其是堆栈闪电战示例)！

Answer 1

如果您像这样对状态进行建模，捕获基本产品列表和在搜索文本框中输入的文本，您可能会发现这更容易：

export interface ProductsStateModel {
products: Product[];
filterText: string; // Your SKU value that is entered
} 

..然后，在您的状态下，使用选择器投影出您实际要在 UI 上显示的筛选列表 (filteredProducts)。

@State<ProductsStateModel>({
name: 'products'
})
export class ProductsState { 
@Selector()
static filteredProducts(state: ProductsStateModel) { 
return state.products.filter(p => p.sku === state.filterText);
}
@Action(ProductSkuEntered)
updateFilter({patchState}: StateContext<ProductStateModel>, {payload}: ProductSkuEntered) {
patchState({ filterText: payload.skuText });
}
..
}

在UI中，您可以在模板中订阅选择器，即products.component.ts使用@Select(ProductsState.filteredProducts) products$。

当搜索文本更改时，您可以将操作分派到商店以更新该字符串的状态，即store.dispatch(new ProductSkuEntered({ skuText: enteredText }));然后，NGXS选择器将自动更新您的"过滤产品"列表，以仅显示与文本匹配的产品。

将debounceTime与文本中的更改挂钩也很好，这样您仅在用户停止键入时才进行过滤。 即仅在去抖动后调度ProductSkuEntered。

注意：我看到您正在使用NGXS表单插件 - 我没有使用该插件的经验，但这种情况不需要它(尽管您可能在其他地方使用它)。