What's the easiest way to integrate Aurelia routing and Redux states?
The main idea is to receive timelapse feature to simplify debugging process. By the default I miss the possibility to hook redux states changes inside the router.
In the direct solution (see below) the router may die when we make the timelapsing. Application may freeze.
May be you know how it may be better?
The simplified code looks like that:
export class Main {
constructor(store, { logout, setRoute, setBreadcrumbs }, eventAggregator: EventAggregator,
navigation: Navigation) {
this.eventAggregator = eventAggregator;
this.navigation = navigation;
this.setRoute = setRoute;
this.setBreadcrumbs = setBreadcrumbs;
this.store = store;
this.sync();
this.store.subscribe(this.sync.bind(this));
}
sync() {
let state = this.store.getState();
this.nav = {
route: state.route,
breadcrumbs: state.breadcrumbs
};
//to enable Redux timelaps support
if (this.currentRoute && this.nav.route.route && this.currentRoute.route != this.nav.route.route) {
this.currentRoute = {...this.nav.route, disableUpdates: true };
this.router.navigateToRoute(this.nav.route.route, this.nav.route.params || this.nav.route.queryParams);
}
}
activate(){
this.eventAggregator.subscribe("router:navigation:success", this.navigationListener.bind(this));
}
navigationListener(e) {
this.navState = "success";
//console.log(this.router.currentInstruction);
let routeName = this.router.currentInstruction.config.name;
let path = this.navigation.getNavPath(routeName);
let route = {
...(path[path.length - 1] || {}),
params: this.router.currentInstruction.params,
queryParams: this.router.currentInstruction.queryParams
};
if (!this.currentRoute || !this.currentRoute.disableUpdates) {
this.setBreadcrumbs([].concat(path));
this.currentRoute = route;
this.setRoute(route);
} else
this.currentRoute = route;
}
configureRouter(config, router) {
this.router = router;
}
}