Объявление состояния в NGXS в разумной манере - PullRequest
Новая
       55

Объявление состояния в NGXS в разумной манере

0 голосов
/ 11 апреля 2019

Я изучаю NGXS с помощью плагина Emitters в Angular, и у меня возникли некоторые проблемы с пониманием того, как декларировать мои файлы состояния управляемым способом.

Я успешно объявил простой файл .state следующим образом: 


export type PageStatusCases = 'LOADING' | 'IDLE' | 'ERROR' | 'INITIALIZING';

export interface AppStateModel {
  pageStatus: PageStatusCases;
}

@State<AppStateModel>({
  name:     'AppState',
  defaults: {
    pageStatus: 'INITIALIZING'
  }
})
export class AppState {

  @Selector()
  static pageStatus(state: AppStateModel): PageStatusCases {
    return state.pageStatus;
  }

  @Receiver({type: '[Global] Page status'})
  static setPageStatus({patchState}: StateContext<AppStateModel>, {payload}: EmitterAction<PageStatusCases>): void {
    patchState({pageStatus: payload});
  }

}

Теперь я пытаюсь более сложный пример преобразования моего Service в State

В моем сервисе у меня много BehaviorSubject отслеживающих состояние моего пользовательского интерфейса. 

  title: BehaviorSubject<string> = new BehaviorSubject('');

  backClick$: EventEmitter<void> = new EventEmitter<void>();
  primaryClick$: EventEmitter<void> = new EventEmitter<void>();

  toolbarVisible$: BehaviorSubject<boolean> = new BehaviorSubject(true);
  primaryVisible$: BehaviorSubject<boolean> = new BehaviorSubject(false);
  primaryDisabled$: BehaviorSubject<boolean> = new BehaviorSubject(false);
  primaryAutoDisabled$: BehaviorSubject<boolean> = new BehaviorSubject(false);
  primaryIcon$: BehaviorSubject<ToolbarPrimaryIcon> = new BehaviorSubject(ToolbarPrimaryIcon.ADD);

Я начал преобразовывать свои BehaviorSubject в части штата, но я понял, что мне нужно создать много стандартного кода.

За каждые BehaviorSubject мне нужно:

  • Объявите это в государственной модели Interface
  • Объявить состояние по умолчанию в State
  • Объявить, что @Selector в состоянии "манифест"
  • Объявить, что @Receiver (Action) в состоянии
  • Объявите, что @Select в каждом компоненте, который нуждается в этом
  • Объявите, что это @Emitter в каждом компоненте, который нуждается в этом, для того, когда я хочу обновить его

Моя текущая ситуация - более 100 строк кода для правильного управления состоянием только 7 переменных, поэтому я думаю, что что-то упустил. Я даже не жалуюсь на количество добавленного визуального шума.

Очевидно, что что-то не так

Я хотел бы знать, что мне не хватает, и что было бы лучшим способом объявить состояние в такой ситуации.

Я использую NGXS с плагином emitters, потому что я через него собирался уменьшить количество шаблонов, но на данный момент я не набираю много.

1 Ответ

0 голосов
/ 12 апреля 2019

Будет некоторая основа, но я думаю, что основная проблема, с которой вы можете столкнуться, - это создание группы @Selector, которые просто получают доступ к единственному свойству состояния - компоненты, которые подписываются на изменения состояния, не нуждаются @Selector за это.

Они могут просто подписаться на состояние напрямую через привязку @Select Observable или просто через оператор store.select(), если это необходимо. Также на рисунке показана куча @Select объявлений с состоянием (также не требуется).

Я сам не использовал материал Emitters от NGXS Labs, поэтому я не могу комментировать это использование.

...