Каков наилучший способ реагировать на изменения состояния ngxs в вашем компоненте для событий загрузки или ошибок? - PullRequest
Новая
       31

Каков наилучший способ реагировать на изменения состояния ngxs в вашем компоненте для событий загрузки или ошибок?

0 голосов
/ 13 февраля 2019

У меня есть PostListComponent, который перебирает все сообщения, полученные с сервера, и отображает отдельный PostItemComponent.Я использую NGXS для управления состоянием.Когда я инициирую запросы fetchPosts, я изменяю свойство загрузки состояния: true.Когда запрос завершается успешно, я изменяю его обратно на false.Если запрос не выполняется, я обновляю объект ошибки в состоянии и обновляю свойство сообщения объекта ошибки и свойство исключения.

Вот что у меня есть 

`
export class PostListComponent implements OnInit {    
  private posts$: Observable<any> = this.store.select(state => state.posts);
  private isLoading: boolean = false;
  private error: object = {};

  constructor(
    public postsFacade: PostsFacadeService,
    public moviesFacade: MoviesFacadeService,
    private store: Store) {    
  }

  ngOnInit() {
    this.posts$.subscribe(
      (state) => this.onLoadingEvent(state)
      );

    this.posts$.subscribe(
      (error) => this.onErrorEvent(error)
    )
    // this.posts$.pipe(
    //   mergeMap(() => {
    //     // perform the subscription here and listen for state changes
    //   })
    // )

  }

  onErrorEvent(error)
  {
    this.error = error.error;
  }

  onLoadingEvent(state)
  {
    this.isLoading = state.loading;  
  }
`

Структура моего магазина 

`
@State<PostStateModel>({
    name: 'posts',
    defaults: {
        posts: [],
        loading: false,
        error: {
          message: "",
          error: ""                   
        },
    }
})
`

Мне кажется, что есть лучший способ подписаться на изменения состояния вхранить с использованием, возможно, оператора rxjs mergeMap.Я не уверен, возможно ли это и эффективен ли нынешний подход.Как еще я могу подписаться и реагировать на изменения магазина внутри моего компонента?

1 Ответ

0 голосов
/ 13 февраля 2019

Итак, несколько вещей:

  1. Вам необходимо определить некоторые действия состояния для вашего класса состояний - например, LoadPosts.
  2. Вы должны отправить это действие (скажем, в вашем ngOnInit),или где-то до загрузки компонента.Действие должно вызывать службы, которые фактически извлекают данные, тем самым удаляя эту зависимость из вашего компонента.
  3. Если служба использует Observables или Promises, вы должны обработать их, когда они наконец вернутся, обновив ваше состояние в этой точке.

  4. Вы можете создать свою наблюдаемую с помощью @Select.Обратите внимание, что таким образом он набирается.

    @ Select (PostState) postState $: Observable;

  5. Вы можете использовать асинхронный канал в своем компоненте, и вам может не понадобитьсяподписаться на postState $ непосредственно в вашем коде (например, использовать * ngFor для итерации по сообщениям).

  6. Поскольку ваше состояние включает в себя сообщения, флаг загрузки и ошибку, подпискасостояние в целом приведет к выполнению вашей функции подписки или асинхронного канала независимо от того, какие из этих изменений.Если вы создаете методы селектора с помощью @Selector () в своем классе состояний, вы можете подписаться на них для большей детализации, например, чтобы реагировать только на флаг загрузки.

...