My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

What's the easiest way to integrate Aurelia routing and Redux states?

Yahor's photo
Yahor
·Jul 17, 2016

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;
    }
}