injection of redux's dispatch in react-router's onEnter hook

index.js

/*
 * common react, redux staff here
 */
import {Router, createRoutes} from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import rawRoutes from './routes';
import store from './store';

function mixStoreToRoutes(routes) {
    return routes && routes.map(route => ({
        ...route,
        childRoutes: mixStoreToRoutes(route.childRoutes),
        onEnter: route.onEnter && function (props, replaceState, cb) {
            route.onEnter(store.dispatch, props)
                .then(() => cb(null))
                .catch(cb);
        }
    }));
}

const routes = mixStoreToRoutes(createRoutes(rawRoutes));

ReactDOM.render(
    <Provider store={store}>
        <Router
            history={createBrowserHistory()}
            routes={routes}
        />
    </Provider>,
    document.querySelector('[data-app]')
);

routes.js

import {App, Home, Settings, Signup, Login} from './containers';
import {loadSettings} from './actions';

export default (
    <Route>
        <Route component={App} onEnter={dispatch => dispatch(loadSettings())}>
            <Route path="/" component={Home}/>
            <Route path="/settings" component={Settings}/>
        </Route>
        <Route path="/signup" component={Signup} />
        <Route path="/login" component={Login} />
    </Route>
);