How to get redux application state in onEnter?

[rightaway]

When I add the onEnter to a route, I get several errors about ReduxRouterContext and the page doesn't load.

const routes = (
  <Route path='/' component={App}>
    <Route path='profile' component={Profile} onEnter={requireAuth} />
    <Route path='*' component={NotFound} />
  </Route>
);

...

React.render((
  <div>
    <Provider store={store}>
      {() => <ReduxRouter />}
    </Provider>
    <DebugPanel top right bottom>
      <DevTools store={store} monitor={LogMonitor} />
    </DebugPanel>
  </div>
), document.getElementById('app'));

Warning: Failed propType: Required prop `location` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`. bundle.js:13484:8
Warning: Failed propType: Required prop `routes` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`. bundle.js:13484:8
Warning: Failed propType: Required prop `params` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`. bundle.js:13484:8
Warning: Failed propType: Required prop `components` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`. bundle.js:13484:8
Warning: Failed Context Types: Required child context `location` was not specified in `RoutingContext`. Check the render method of `ReduxRouterContext`.

[rightaway]

Seems like it was being caused by a wrong implementation of requireAuth on my part. Which leads me to the question how can I get the redux application state in onEnter? onEnter is passed 3 arguments, but inspecting them in the console it looks like none of them contain the application state (like the stuff you'd access in react components through this.props).

[geekyme]

Hmmm, how are u passing routes down to ReduxRouter?

I am also having the same problem but triggered by something else.

[geekyme]

#67

[rightaway]

const createStoreWithMiddleware = compose(
  // ...
  reduxReactRouter({ routes, createHistory }),
  // ...
)(createStore);

I got it from the samples here. But I'm no longer getting the error you described in #67 because that was coming from a requireAuth that was actually just doing a console.log to see what arguments get passed in, but wasn't doing anything else.

But I'm still wondering how to get redux state in onEnter so that I can do the right thing based on the current state.

[chentsulin]

use getRoutes({ dispatch, getState }) api:
see: #68 (comment)

but there is a bug blocking this usage, see: #62

[rightaway]

@chentsulin, thanks, do you have an example that shows how to use that code snippet you provided in that comment? I can't tell where and how to use it.

[anthonator]

I'm with @rightaway. Could use an example.

[AndrewKarasek]

I'm trying to use the declarative syntax to define our app's routes:

    <ReduxRouter>
      <Route path={HOME} name="Home" component={Home}>
        <Route path={LOGIN} name="Login" component={Login} />
        <Route path={SERVICE} name="Service" component={Service} onEnter={requireAuth} />
      </Route>
    </ReduxRouter>

It would be ideal if the onEnter hook were invoked with getStore as well as the nextState, replaceState, etc argument, ie:

function requireAuth({ getStore, nextState, replaceState }) {
  if (getStore().auth.grant.expired) {
    // redirect back to login.
    replaceState({ nextPathname: nextState.location.pathname }, LOGIN)
  }
}

[jvanleeuwen]

@AndrewKarasek ea

You can wrap your routes in a function that accepts the store object and provide this as the getRoutes parameter in your store create function. Example:

function getRoutes({ dispatch, getState }) {

    function onEnter(nextState, state) {
        // You should now have access to both dispatch and getState
    }

    return (
        <Route path="/" component={ App }>
            <Route path="dashboard" component={ Dashboard } onEnter={ onEnter } />
        </Route>
    );
}

const finalCreateStore = compose(
    applyMiddleware(...middleware),
    reduxReactRouter({
        getRoutes,
        history,
    })
)(createStore);

[b5]

This example provided by @jvanleeuwen is working like a charm for me. Thanks!

[stevenleeg]

@jvanleeuwen I'm getting Uncaught ReferenceError: store is not defined(…) in my onEnter function while following that pattern. Any ideas as to why that'd be the case? (I can post more info about my setup if you need)

[jvanleeuwen]

@stevenleeg Unfortunately I have this issue too. For now you can use the links and work @chentsulin (thanks) did in #62 to get around this. Seems like the store is not fully created when getRoutes is called

[nhagen]

I'm also having this issue. Using the workaround, going to a disallowed route renders the disallowed route before redirecting, which is not acceptable behavior. @stevenleeg @jvanleeuwen are you also seeing that?

[jvanleeuwen]

@nhagen What happens when you turn the behaviour around.. Render the allowed route and when a authentication is successful redirect to the (no longer) disallowed route