我正在使用ngrx store(4.x)和Angular 4.我使用效果在后端进行CRUD操作,就像下面的示例一样,它在后端API上添加了一个Task。
效果:
@Effect()
addTask: Observable<Action> = this.actions$
.ofType(LeadAction.ADD_TASK)
.map((action: LeadAction.AddTaskAction) => action.payload)
.switchMap((task: TaskViewModel) => {
return this.leadApi.leadAddTask(task.LeadId, task)
.map((taskResult: TaskViewModel) => {
return new LeadAction.AddTaskSuccessAction(taskResult);
})
.catch((e: any) => of(new LeadAction.AddTaskFailureAction(e)));
});
TaskEditComponent:
onSave(): void {
this.store.dispatch(new AddTaskAction(this.task));
// **** NAVIGATE TO PAGE TaskListComponent or OverviewComponent ON SUCCESS
// OR
// **** NAVGIATE TO PAGE Y ON ERROR
}
问题:在我的组件中,我需要导航到不同的页面,现在我在努力摆脱这种逻辑?
特别是当我考虑以下场景时,不同组件“调用”TaskEditComponent:
应导航回TaskListComponent:
OverviewComponent-&gt; TaskListComponent-&gt; TaskEditComponent返回列表
应导航回OverviewComponent:
OverviewComponent-&gt; TaskEditComponent
答案 0 :(得分:5)
使用ngrx
,让你的商店处理路由器状态也是有意义的,保留 redux 范例。然后,您只需在效果中调度路由器操作以响应您的成功操作。
这样做的另一个好处是能够time travel&#39;路线以及应用程序状态的其余部分。
幸运的是,已经准备好使用implementation of router-store integration。
希望这有点帮助: - )
你可以做这样的事情(只是一个指导方针,增强你的需求):
app.module
import { StoreRouterConnectingModule, routerReducer } from '@ngrx/router-store';
import { App } from './app.component';
@NgModule({
imports: [
BrowserModule,
StoreModule.forRoot({ routerReducer: routerReducer }),
RouterModule.forRoot([
// ...
{ path: 'task-list', component: TaskListComponent },
{ path: 'error-page', component: ErrorPageComponent }
]),
StoreRouterConnectingModule
],
bootstrap: [App]
})
export class AppModule { }
task.effects
import { go } from '@ngrx/router-store';
@Effect()
addTask: Observable<Action> = this.actions$
.ofType(LeadAction.ADD_TASK_SUCCESS)
.map((action: LeadAction.AddTaskSuccessAction) => action.payload)
.map((payload: any) => go('/task-list')); // use payload to construct route options
@Effect()
addTask: Observable<Action> = this.actions$
.ofType(LeadAction.ADD_TASK_FAILURE)
.mapTo(go('/error-page'));