ngrx: создавать повторно используемые действия для нескольких функциональных модулей - PullRequest
0 голосов
/ 20 сентября 2018

У меня есть приложение Angular 5, которое состоит из нескольких функциональных модулей.Каждый модуль отвечает за ресурсы конкретной страницы и загружается с отложенной загрузкой.

src/
|--app/
   |--core/ <-- core functionality here
   |--landing/
   |--store/
   |--about-us/

Для каждого модуля у меня есть компонент страницы верхнего уровня, который подключается к хранилищу и очень похожим образом извлекает данные по страницам.

landing.component.ts

this.store.pipe(select(getDataForThisPage));
...
this.store.dispatch(new PageAction.FetchData());

Таким образом, каждый компонент страницы извлекает данные из серверной части и помещает их в собственное хранилище функций.

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

Каков наилучший способ сделать это?

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

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

Более полезно для вас, в RxJ вы можете создавать пользовательские операторы для функционализации общих операций.Например:

import { tap } from 'rxjs/operators'
import { Observable } from 'rxjs'

export const customLog = <T>(debug) => {
  return (source: Observable<T>) => source.pipe(
    tap((value) => { debug(value) })
  )
}

И вы можете использовать этот пользовательский оператор следующим образом:

@Effect()
  appInit$ = this.actions$.pipe(
    ofType<InitAction>(InitActionTypes.Init),
    customLog(debug),
    // etc
  )

Очевидно, что логика в конвейере пользовательского фильтра может быть намного более сложной.

0 голосов
/ 20 сентября 2018

Посмотрите на @ ngrx / entity .

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

Но перед тем, как попробовать сам, я бы попробовал @ ngrx / entity, чтобы вы могли понять, что возможно.

...