时间戳

首页 > 解决方案 > 一个选择器用于多种特征状态

angular - 一个选择器用于多种特征状态

问题描述

我有 2 个页面使用相同的减速器和状态。所以我想知道如何在组件中使用 ngrx 选择器，以便它们使用正确的功能状态，就像减速器在组件中所做的那样。

page1.module.ts

@NgModule({
  declarations: [
    PageComponent
  ],
  imports: [
    StoreModule.forFeature('page-1', PageReducer)
  ]
})

页面组件.ts

this.store.dispatch(PageActions.getUsers()); //Everything works fine, users are stored in "page-1" state
this.store.pipe(SelectUsers); // Doesn't work. I wanna select users from feature state "page-1"

page2.module.ts

@NgModule({
  declarations: [
    PageComponent
  ],
  imports: [
    StoreModule.forFeature('page-2', PageReducer)
  ]
})

页面组件.ts

this.store.dispatch(PageActions.getUsers()); //Everything works fine, users are stored in "page-2" state
this.store.pipe(SelectUsers); // Doesn't work. I wanna select users from feature state "page-2"

标签： angularngrx

解决方案

select从导入@ngrx/store

import { select, Store } from '@ngrx/store';

您忘记将 包装SelectUsers在select方法中。

this.users$ = this.store.pipe(select(SelectUsers));

this.users$将是一个可以用async管道绑定到 UI 上的 observable

例如

<div>{{ (users$ | async)?.name }}</div>

我假设你已经正确连接了选择器，所以这应该可以工作。

您可以在一个选择器下组合多个状态

const getPageOneState = createFeatureSelector('page-1');
const getPageTwoState = createFeatureSelector('page-2');

export const SelectUser = createSelector(
    getPageOneState,
    getPageTwoState,
    (pageOneState, pageTwoState) => {
      return { ...whatever you want to return... }
    }
)

推荐阅读