Using with react-router-redux

[vasyas]

Having troubles integrating with react-router-redux:

import { syncHistoryWithStore, routerReducer, routerMiddleware } from 'react-router-redux'

let reducers = combineReducers({
  app: app.reducer,
  routing: routerReducer,
});

const storeFactory = createEffectCapableStore(createStore);

const store = compose(
    applyMiddleware(routerMiddleware(browserHistory), thunk),
    typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f => f
)(storeFactory)(reducers);

const history = syncHistoryWithStore(browserHistory, store);

Fails on syncHistoryWithStore with error: Expected the routing state to be available either as state.routing or as the custom expression you can specify as selectLocationState in the syncHistoryWithStore() options. Ensure you have added the routerReducer to your store's reducers via combineReducers or whatever method you use to isolate your reducers.

[tomkis]

Are you using combineReducers exposed from redux-side-effects package not from redux?

[vasyas]

Yes, one from redux-side-effects. And looks like it is causing the problem, b/c it works ok with redux version of combineReducers.

[tomkis]

That's weird, I tried to replicate but everything seems to work for me... here's fully working example:

import React from 'react';
import { render } from 'react-dom';
import { createStore, compose } from 'redux';
import { Provider, connect } from 'react-redux';
import { createEffectCapableStore, combineReducers, sideEffect } from 'redux-side-effects';
import { Router, Route, hashHistory, Link } from 'react-router';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';

const Foo = () => <div>Foo <Link to="/bar">Bar</Link></div>;
const Bar = () => <div>Bar <Link to="/foo">Foo</Link></div>;

export default () => {
  const storeFactory = compose(
    createEffectCapableStore,
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )(createStore);

  const store = storeFactory(combineReducers({
    main: function*(appState = 0, action) {
      yield sideEffect(() => console.log('side effect'));
      return appState + 1;
    },
    routing: routerReducer
  }));

  const history = syncHistoryWithStore(hashHistory, store)

  render((
    <Provider store={store}>
      <Router history={history}>
        <Route path="foo" component={Foo}/>
        <Route path="bar" component={Bar}/>
      </Router>
    </Provider>
  ), document.getElementById('app'));
}