Я принял ngrx в своем приложении с центральным хранилищем для хранения данных. Я пытаюсь сделать первую загрузку данных, а затем перейти к значению по умолчанию. Это открыло все виды вопросов о том, как я должен использовать ngrx при отражении состояния в URL.
Давайте возьмем два URL, которые пользователь может набрать:
URL: / account/: accountNumber
- Все учетные записи для пользователя должны быть получены из бэкэнда и загружены в хранилище.
- Детали учетной записи: accountNumber должен быть извлечен из бэкэнда и загружены в хранилище.
Как мне это сделать:
- Из распознавателя учетных записей я вызываю действие store.dispatch, чтобы запросить зарегистрированные учетные записи
- Из преобразователя: accountNumberЯ вызываю действие .dispatch, чтобы запросить информацию о значении в: accountNumber
Это, кажется, работает довольно хорошо. и когда я перемещаюсь из приложения, или пользователь вводит URL-адрес и загружает приложение, магазин и данные синхронизируются. (См. Средства разрешения проблем ниже)
URL: / accounts
- Все учетные записи для пользователя должны быть получены из серверной части и загружены в хранилище.
- URL долженперейдите в / account / 1111, где 1111 - первый элемент в списке учетных записей, и, следовательно, получите данные учетной записи 1111 из бэкэнда и загрузите их в хранилище.
Я пробовал разные подходы, в том числевызов router.navigate из распознавателя учетных записей, но это делает меня бесконечным циклом в этом преобразователе. Кроме того, в самом обработчике учетных записей я даже не знаю, как провести различие между / account и / account / 2222, чтобы я мог вызывать навигацию только в том случае, если не указано accountNumber.
распознаватель учетных записей:
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
Observable<Array<Account>> | Promise<Array<Account>> | Array<Account> | any {
const webUserId = '150104';
return this.store.pipe(
select(selectEnrolledAccounts),
tap(() =>
this.store.dispatch(new EnrolledAccountsRequested({webUserId}))),
filter(accounts => accounts.length > 0),
first()
);
}
: accountNumber resolver
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
Observable<Account> | Promise<Account> | Account | any {
const accountNumber = route.paramMap.get('accountNumber');
return this.store.pipe(
select(selectAccountNumberSelected),
tap(() =>
this.store.dispatch(new AccountSelected({accountNumber}))),
filter(an => !!an),
first()
);
}
Поэтому, когда пользователь пытался загрузить только / с учетными записями, я пытался выполнить некоторую навигацию в распознавателе учетных записей
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
Observable<Array<Account>> | Promise<Array<Account>> | Array<Account> | any {
const webUserId = '150104';
const accountNumber = route.paramMap.get('accountNumber');
return this.store.pipe(
select(selectEnrolledAccounts),
tap(() =>
this.store.dispatch(new EnrolledAccountsRequested({webUserId}))),
filter(accounts => accounts.length > 0),
mergeMap(accounts => {
if (!accountNumber) {
this.router.navigate(['accounts', accounts[0].accountNumber, 'home']);
return of(accounts); //EMPTY;
} else {
return of(accounts);
}
}),
first()
);
}
Но это решение делаетне работает, включая то, что accountNumber не будет доступен в качестве параметра в этом преобразователе, поэтому я не могу различить, если полный URL-адрес уже указал номер учетной записи.