redux - 如何从 ngrx 中的 Router_Cancel 获取以前的状态？

Question

我试图通过使用 CanDeactivate 限制用户离开当前页面。 (如果表单脏且未保存)。当我们点击任何链接时，Router_Navigation事件正在被调用，它正在更新商店中的路由器状态，如果我取消模式弹出窗口中的页面导航(从可以停用)，Router_Cancel事件正在被调用，但当前路由器状态没有得到更新(它仍然指向其他页面)。

我在 ngrx 看到了这个文档:

ROUTER_CANCEL and ROUTER_ERROR contain the store state before the navigation. Use the previous state to restore the consistency of the store.

有人可以帮助我了解如何从 Router_cancel 获取以前的状态吗？行动。

谢谢

Answer 1

我通过创建一个 applicationRouter 状态来维护当前和以前的路由来解决这个问题，每当 ngrx 路由器调度一个 ROUTER_NAVIGATION 事件时，我正在监听它并更新我的 applicationRouterState。

在每个点 applicationRouter 将只有两个路由器事件(当前和以前的状态)。

每当触发 Router_Cancel 时，我都会切换以前的路由器和当前的路由器状态。

PFB，解决方案:

@Effect()
    navigationListener$ = this.actions$.ofType('ROUTER_NAVIGATION')
        .pipe(
            switchMap((routerNavigationAction: RouterNavigationAction<RouterDefinition>) => {
                return of(routerNavigationAction).pipe(
                    withLatestFrom(this._routerNavigationData$),
                    map(([action, routerNavData]: [RouterNavigationAction<RouterDefinition>, RouterState]) => {
                        // TODO: Move this logic to Reducer
                        if (!(routerNavData.currentRouter && routerNavData.currentRouter.url
                            && routerNavData.previousRouter && routerNavData.previousRouter.url)) {
                            routerNavData.previousRouter = routerNavData.currentRouter =  action.payload.routerState;
                        } else {
                            routerNavData.previousRouter = routerNavData.currentRouter;
                            routerNavData.currentRouter = action.payload.routerState;
                        }
                        return new fromActions.MaintainPrevCurrRouterStateAction(routerNavData);
                    })
                );
            })
        );

这是我的状态对象:

export interface RouterDefinition {
    url: string;
    queryParams: Params;
    params: Params;
    segments: string[];
}
export interface RouterState {
    currentRouter: RouterDefinition;
    previousRouter: RouterDefinition;
}