У нас есть угловой проект на работе (который будет разработан, еще не начался). Это довольно сложно и имеет сложные потоки данных. Кроме того, у нас есть два вида пользователей в нашем приложении. Менеджер и пользователи. Эти пользователи будут видеть похожие взгляды, но для каждого из них есть разные пользовательские представления. У менеджера будет доступ к более функциональным возможностям, как вы могли себе представить. Чтобы управлять этим довольно большим и сложным приложением масштабируемым способом, мы следуем шаблону NX. Т.е. несколько приложений в рамках одного репо. В конце, в рамках одного репо, у меня есть следующие приложения.
Большая часть разработки будет выполнена в common
приложении, а различные виды и настройки будут выполняться как в mngr-app
и в user-app
соответственно.
Мы также думаем о применении ngrx
в нашем приложении для государственного управления. Я видел несколько примеров и руководств, как это сделать. Пока все в порядке. Эта часть предназначена только для справочной информации.
Наша проблема начинается после этого. Наша бизнес-команда также хочет, чтобы мы разрабатывали приложения для iOS и Android с веб-просмотрами, содержащими веб-приложение (я забыл упомянуть, что это отзывчивое веб-приложение). Итак, все, что мы сделали, будет отправлено в веб-браузер для мобильных пользователей. Тем не менее, бизнес-команда также хочет, чтобы мы разработали некоторые пользовательские собственные представления для мобильных приложений.
Давайте рассмотрим следующий пример: (это из примера ngrx)
Когда пользователь нажимает кнопку " Add Book to Collection
, тип действия [Collection] Add Book
отправляется в магазин, и эффект будет позаботиться о нем следующим образом:
@Effect()
addBookToCollection$: Observable<Action> = this.actions$
.ofType(collection.ADD_BOOK)
.map((action: collection.AddBookAction) => action.payload)
.switchMap(book =>
this.db.insert('books', [ book ])
.map(() => new collection.AddBookSuccessAction(book))
.catch(() => of(new collection.AddBookFailAction(book)))
);
Это нормальный поток веб-приложения.
Наша бизнес-команда хочет, чтобы мы создали какую-то специальную логику для мобильных приложений, так что, когда пользователи переходят на эту страницу в мобильном приложении (iOS или Android) вместо того, чтобы добавлять книгу в коллекцию, она откроет собственную страницу и пользователь выполнит действия на этой собственной странице. Я имею в виду, что они хотят, чтобы веб-приложение вел себя по-другому, когда оно присутствует в мобильном приложении. Я могу добиться этого с помощью команды if(window.nativeFlag === true)
в веб-приложении. Однако это всего лишь грязный хак, которого мы хотим избежать. Поскольку мы используем ngrx
и rxjs
мы чувствуем, что это можно сделать с помощью Observable
of rxjs
и Action
ngrx
.
До сих пор мы пытались открыть объект store
и actions
для DOM, чтобы мы могли получить к нему доступ в мобильном приложении.
constructor(private store: Store<fromRoot.State>, private actions$: Actions) {
window['store'] = this.store;
window['actions'] = this.actions$;
}
Таким образом, мы можем подписаться на событие [Collection] Add Book
следующим образом
actions().ofType('[Collection] Add Book').subscribe(data => {
console.log(data)
})
и получать уведомление, когда книга добавляется в коллекцию. Тем не менее, веб-приложение по-прежнему делает то, что обычно делает, и мы не можем переопределить это поведение.
Мой вопрос заключается в том, как подписаться на некоторые действия ngrx
из мобильных приложений и отменить поведение веб-приложения?
редактировать
Я придумал решение самостоятельно, однако любые другие решения оценены, и я дам щедрость, если вы сможете придумать лучшую.