Как ngXs выбирает лямбда-код, чтобы узнать, в каком состоянии искать?

#angular #ngxs

Вопрос:

Согласно документации NGXS, ниже приведен допустимый код:

 import { Select } from '@ngxs/store';
import { ZooState, ZooStateModel } from './zoo.state';

@Component({ ... })
export class ZooComponent {
  // Reads the name of the state from the state class
  @Select(ZooState) animals$: Observable<string[]>;

  // Uses the pandas memoized selector to only return pandas
  @Select(ZooState.pandas) pandas$: Observable<string[]>;

  // Also accepts a function like our select method
  @Select(state => state.zoo.animals) animals$: Observable<string[]>;

  // Reads the name of the state from the parameter
  @Select() zoo$: Observable<ZooStateModel>;
}
 

Мой вопрос конкретно касается этого третьего @Select . Как именно декоратор и/или фреймворк знают, какое состояние следует использовать в лямбде? Здесь нет ничего очевидного, чтобы сказать: «этот компонент использует ZooState в качестве объекта состояния», так как же определить правильный срез состояния для просмотра?

Для протокола, этот шаблон, похоже, работает просто отлично — я просто немного озадачен тем, КАК это сделать.

Ответ №1:

При использовании @Select декоратора NGXS с функцией, ссылающейся на целевое состояние, state arg в этом случае представляет весь объект состояния, содержащий все состояния регистрации по их именам, которые указаны в @State декораторе (например: @State<ZooStateModel>({ name: 'zoo' }) )

Например, если у вас есть 3 состояния, определенные как: zoo , app , и foo , и зарегистрированные в магазине, то тип state arg будет выглядеть следующим образом:

 @Select((state: { zoo: ZooStateModel; app: AppStateModel; foo: FooStateModel }) => state.zoo.animals)
animals$: Observable<string[]>;
 

Комментарии:

1. Ах, да, конечно. Меня немного сбил с толку мой собственный опыт — на самом деле мне не нужно было указывать полный путь к состоянию с именем состояния, но этот конкретный компонент также имеет доступ только к одному объекту состояния, поэтому я предполагаю, что в этом нет необходимости, если в вашем модуле доступен только один объект состояния.

2. Не могли бы вы, пожалуйста, уточнить, что именно вы пытаетесь сказать или спросить!? 🙂

3. Извините, если это было неясно… Я хотел сказать, что у меня есть компонент, который просто делает @Select(state => state.property) , а не @Select(state => state.stateSlice.property) . Я предполагаю, что причина, по которой это работает, заключается в том, что компонент, содержащий @Select только один объект состояния, имеет доступ к этому объекту NgxsModule.forFeature(MyState) состояния через файл .module.ts.