我遇到了以下问题，我确实需要一些建议来解决这个问题。
在我们的应用程序上，我们有一个容器组件，如下所示：
ArchiveAllComponent
export class ArchiveAllComponent implements OnInit {
archiveAllViewModel$: Observable<ArchiveAllViewModel>
constructor(
private store: Store<ApplicationState>,
private votingService: VotingService
) { }
ngOnInit() {
// Subscribe to any changes in the category and voting entities
this.archiveAllViewModel$ = this.store.pipe(
select(selectCategoriesWithVoting),
map((categories: Category[]) => mapToArchiveAllViewModel(categories))
)
// Load all categories
this.votingService.getCategories().subscribe((categories: Category[]) => {
this.store.dispatch(new LoadCategoryAction(categories));
});
// Load all votings
this.votingService.getVotings().subscribe((votings: Voting[]) => {
this.store.dispatch(new LoadVotingAction(votings));
});
}
}
呈现此组件后，将对不同的API执行两个HTTP GET请求。
对于每个请求，都会将操作分派到商店。
减速器
// Reducer function
export function entityReducer(currentState: Entities, action: EntityActionsUnion): Entities {
switch (action.type) {
case EntityActionTypes.LOAD_CATEGORIES:
return merge({}, currentState, {categories : action.categories});
case EntityActionTypes.LOAD_VOTINGS:
return merge({}, currentState, {votings : action.votings});
default:
return currentState;
}
}
选择器
export function selectCategoryEntity(state: ApplicationState) {
return state.entities.categories;
}
export function selectVotingEntity(state: ApplicationState) {
return state.entities.votings;
}
export const selectCategoriesWithVoting = createSelector(
selectCategoryEntity,
selectVotingEntity,
(categoryEntities: Category[], votingEntities: Voting[]) => {
if (categoryEntities && categoryEntities.length > 0 && votingEntities && votingEntities.length > 0) {
let categories = categoryEntities.slice();
votingEntities.forEach(voting => {
if (voting.categoryId) {
let category = categories.find(x => x.id == voting.categoryId);
if(!category.votings)
{
category.votings = [];
}
category.votings.push(voting);
}
});
return categories;
}
return [];
}
);
然后将可观察的
archiveAllViewModel$传递给一些子组件，以相应地呈现HTM1。乍一看似乎可行，即使您进行刷新，也会执行以下操作：
页面刷新
getCategories() +动作/减速器被触发getVotings() +动作/减速器被触发<archiveElement> +第一个子元素正确呈现<archiveElement> +第二个子元素正确呈现<archiveElement> +第三个子元素正确呈现一旦我开始离开该组件并通过客户端站点路由返回到同一路由，就会开始出现问题。
<a routerLink="/someotherpage" routerLinkActive="active" mat-button>Other Page</a>
返回相同的组件：
<a routerLink="/archiveAll" routerLinkActive="active" mat-button>Archive</a>
现在，与整页刷新相比，所有内容都呈现两次：
离开
向后导航
<archiveElement><archiveElement><archiveElement>getCategories() +动作/减速器被触发<archiveElement><archiveElement><archiveElement>getVotings() +动作/减速器被触发<archiveElement><archiveElement><archiveElement>结果，每个子组件现在在页面上出现两次。
故障排除
现在对每个http请求执行一次
createSelector，因为谓词categoryEntities && categoryEntities.length > 0 && votingEntities && votingEntities.length > 0现在不再仅对第二个HTTP请求有效。我的问题
解决此类问题的最佳实践是什么？
有运营商可以为我轻松解决此问题吗？
最佳答案
这里的问题是this.votingService.getCategories()和this.votingService.getVotings()上的订阅没有被销毁。这意味着它将在每次发出请求时重新加载。
要解决此问题，您可以销毁ngDestroy上的订阅，但是这样做之后，我建议您看一下@ngrx/effects来处理所有副作用（例如http请求）。