store not available for hooks

[malte-wessel]

Hey, great work you're doing with redux-react-router!

I tested the next implementation with an existing project that relies on the onEnter hook for authentication. The problem I'm facing is that the store is not available when routes invoke these hooks.

Example

function requireAuth() {
  // At this point I need to access the store in order 
  // to get information about the user
}

const routes = {
  component: Application,
  onEnter: requireAuth,
  childRoutes: [ /* ... */ ]
}

const reducer = combineReducers(reducers);

const finalCreateStore = compose(
  reduxReactRouter({routes, createHistory}),
  /* ... */
);

const store = finalCreateStore(createStore)(reducer);

Any ideas how to make the store available for the onEnter hook?

[malte-wessel]

it would be great to have an api like:

function routes(dispatch, getState) {
  function requireAuth(nextState, redirectTo) {
    const { user } = getState();
    // ...
  }
  return { 
    component: Application,
    onEnter: requireAuth,
    childRoutes: [ /* ... */ ]  
  };
}

const store = compose(
  reduxReactRouter({
    routes,
    createHistory
  })
)(createStore)(reducer);

[acdlite]

Hmm yeah that might work. I've been thinking about this, too. Might be best to split it into a separate option called getRoutes() to be more explicit.

[mjrussell]

👍 Really like the idea of being able to prove the routes with a dispatcher and state, otherwise the routing logic gets pushed down to the components

[acdlite]

Closed by dabfb3b

[malte-wessel]

Cool! thx!

[alexbeletsky]

Was solving same problem and was happy to find getRoutes solution. However, there is an issue with that.

const getRoutes = ({ dispatch, getState }) => {
  function requireAuth(nextState, replaceState) { 
   console.log(getState()); // <-- EXCEPTION is thown here...
  }

  return (
    <Route path="/" component={App}>
      <Route path="sign-up" component={SignUp} />
      <Route path="account" onEnter={requireAuth} />
    </Route>
  );
};

const configureStore = compose(
  applyMiddleware(thunk),
  reduxReactRouter({
    getRoutes,
    createHistory
  })
)(createStore);

const store = configureStore(rootReducer);

const Root = (
  <Provider store={store}>
    <ReduxRouter />
  </Provider>
);

ReactDom.render(Root, document.getElementById('main'));

As you can see, I use onEnter trying to solve auth issue, but getState() get called before store is intitialized.

Uncaught TypeError: Cannot read property 'getState' of undefinedgetState @ routeReplacement.js:63requireAuth 

// ...

In react-redux-universal-hot-example they are using special helper, that patches onEnter function..

But for me, it looks more as workaround not a solution.

[alexbeletsky]

Ok, I got a little more into the issues of that project and some conclusions I got. It's not that actively maintened any more, and there is an issue also complaining about same problem. There is also ongoing discussion in this pull request.

I put that just for summary and let's have a discussion in one place.

[catamphetamine]

Fixed by swapping two lines of code.
https://github.com/acdlite/redux-router/pull/272/files