an integration issue with redux-router and server rendering. about redux-auth-wrapper

[mjrussell]

@Ieremchuk I think you could get by using hoisting (i.e. define the store above, pass the reference to the createRoutes, and then set the result of compose) if you wanted, but there is a far easier approach.

You don't have to pass the routes to the redux-router middleware and I think its even discouraged when using server-side rendering. Check out the SSR example in the redux-router repo here.

The important bit is:

const store = compose(
  reduxReactRouter({ createHistory }),
  devTools()
)(createStore)(reducer, window.__initialState);

const rootComponent = (
  <Provider store={store}>
    <ReduxRouter routes={routes} />
  </Provider>

You can pass the routes to the ReduxRouter component instead of the middleware and it will load them properly.

Let me know if that solves your issue

[Ieremchuk]

@mjrussell Thanks for your answer. Could you please add a little bit more about "hoisting" approach( any google keys or link to documentation )? I am not an experienced js developer.

Regarding the easier approach. I saw this example. It contains a server part as well (link) .
And this part is a main problem for me, because it uses the routes.

app.use((req, res) => {
  const store = reduxReactRouter({ routes, createHistory: createMemoryHistory })(createStore)(reducer);
  const query = qs.stringify(req.query);
  const url = req.path + (query.length ? '?' + query : '');
// skiped

[mjrussell]

@Ieremchuk sorry for not looking through the example more thoroughly...the trick with this approach is "abusing" how the references work in javascript. Instead of capturing scoped variables in a closure, references always refer back to the variables. For example:

let x;
function y() {
  return x + 1;
}
y() // returns NAN
x = 1;
y() // returns 2

So in your case you could do something like:

let store;
const routes = createRoutes(store); 
store = reduxReactRouter({ routes, createHistory: createMemoryHistory })(createStore)(reducer);

The connectRedirect only needs the store when the onEnter fires, which is long after the store has been created.

[Ieremchuk]

@mjrussell It doesn't work for me. By some reason the store remains undefined inside the connect.

const getRoutes = (store) => {
  console.log(store); // undefined
  let connect = function connect(fn) {
    return function (nextState, replaceState) {
      console.log(store); // still left undefined when the top level store has been already created
      return fn(store, nextState, replaceState);
    };
  };

Looks like something wrong with closure. I will try to figure out.
Thanks for your efforts and time.

[Ieremchuk]

@mjrussell Solution that works for me.

1. move connect outside the getRouts.

const getRoutes = (connect) => {
return (
    <Route>
      <Route path="/" component={App}>
        <Route path="login" component={Login}/>
        <Route path="foo"
           component={UserIsAuthenticated(Foo)}
           onEnter={connect(UserIsAuthenticated.onEnter)} 
         />
      </Route>
    </Route>
  );
};

2. And define connect in global context that allows to capture the store in closure.

let store;
const connect = (fn) => (nextState, replaceState) => fn(store, nextState, replaceState);
const routes = createRoutes(connect); 
store = reduxReactRouter({ routes, createHistory: createMemoryHistory })(createStore)(reducer);

All works as expected.