Access store from routes file without using `connect`

I would like to make use of react-router’s onEnter handler in order to prompt users to authenticate when entering a restricted route.

So far my routes.js file looks something like this:

import React from 'react';
import { Route, IndexRoute } from 'react-router';

export default (
    <Route   path="/"         component={App}>
      <IndexRoute             component={Landing} />
      <Route path="learn"     component={Learn} />
      <Route path="about"     component={About} />
      <Route path="downloads" component={Downloads} onEnter={requireAuth} />
    </Route>
)

Ideally, I’d like my requireAuth function to be a redux action that has access to the store and current state, that works like this: store.dispatch(requireAuth()).

Unfortunately I don’t have access to the store in this file. I don’t think I can use really use connect in this case to access the relevant actions that I want, because the thing I’m exporting is not a component. I also can’t just import store from the file where the store is created, as this is undefined when the app first loads.

[jungejason]

Thank you @gaearon!! It’s nice to be able to still have routes in a separated file.

BTW, I really like your Redux training on egghead.io. I really enjoy the way you describe the idea, then do a simple implementation, and then finally add layers of abstractions at the end. It’s the best training video I’ve seen in the last several years. Thank you!

[gaearon]

@jungejason Thank you for kind words!