多个功能状态的一个选择器

Question

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

page1.module.ts

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

PageComponent.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)
  ]
})

PageComponent.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"

Answer 1

从@ngrx/store导入select

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

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

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

this.users$将是一个可以通过async管道绑定到UI上的可观察对象

例如：

<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... }
    }
)