Question

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

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

从select导入@ngrx/store

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

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

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

一个用于多种功能状态的选择器

1 个答案:

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