Блог

Главная - Вопросы по программированию - Объявление состояния в NGXS разумным способом

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

#angular #typescript #state #state-management #ngxs

#angular #typescript #состояние #управление состоянием #ngxs

Вопрос:

Я учусь 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 s, отслеживающих состояние моего пользовательского интерфейса.

   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 s в части состояния, но я понял, что мне нужно создать много шаблонного кода.

Для каждого BehaviorSubject мне нужно:

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

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

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

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

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

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

1. Я думаю, что это хороший вопрос, пока мы не дошли до последних двух нижних абзацев, где он читается как вопрос о «лучших практиках». Его необходимо обновить, чтобы вы обращались за помощью по конкретной проблеме. Вопросы о лучших практиках здесь не по теме.

2. Я думаю, что мой код неверен, поэтому я прошу помощи у кого-то более опытного, чем я

3. В управлении состоянием много шаблонного кода. Существует гораздо больше шаблонов, если вы используете Redux. Ngxs на самом деле очень компактен по сравнению с Redux. Основываясь на том, что я вижу в вопросе. Я бы сказал, что вы не делаете ничего плохого .

Ответ №1:

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

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

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