Dispatching push has no effect with React Router 2.3.0.

[phyllisstein]

Hey there! I'm having some trouble using the dispatch methods included with react-router-redux. In particular, when I dispatch push('/foo'), the store picks up on the changes but the browser doesn't budge. I tried calling history.push('/foo') and it seemed to work, so I'm not sure whether I'm wiring something up wrong or there's a compatibility issue. Here's a screenshot of my Redux logs:

...and some code, just for kicks.

Top-Level render Call

import {browserHistory, Router} from 'react-router';
import {Provider} from 'react-redux';
import {render} from 'react-dom';
import {routes} from './views/app';
import store from './flux';
import {syncHistoryWithStore} from 'react-router-redux';

const history = syncHistoryWithStore(browserHistory, store);

render(
  <Provider store={store}>
    <Router history={history} routes={routes} />
  </Provider>,
  document.getElementById('root')
);

flux/index.js

import * as reducers from './reducers';
import {applyMiddleware, combineReducers, createStore} from 'redux';
import createLogger from 'redux-logger';
import {routerReducer} from 'react-router-redux';
import thunk from 'redux-thunk';

const rootReducer = combineReducers({
  ...reducers,
  routing: routerReducer
});
const middleware = applyMiddleware(
  createLogger(),
  thunk
);

export default createStore(
  rootReducer,
  middleware
);

Sample Broken Component

import {Button} from '../button';
import {connect} from 'react-redux';
import {push} from 'react-router-redux';
import {VerticalLogo} from '../logo';

const mapDispatchToProps = dispatch => {
  return {
    onNavigateTo(dest) {
      dispatch(push(dest));
    }
  };
};

@connect(null, mapDispatchToProps)
class AppBar extends React.Component {
  static propTypes = {
    onNavigateTo: React.PropTypes.func,
    onToggleMenu: React.PropTypes.func
  };

  handleLogoClick = ev => {
    ev.preventDefault();
    this.props.onNavigateTo('/');
  }

  render() {
    return (
      <nav>
        <VerticalLogo inverse onClick={this.handleLogoClick} />
        <Button block inverse icon="menu" onClick={this.props.onToggleMenu} />
      </nav>
    );
  }
}

export default AppBar;

I'd be grateful for any suggestions you have for troubleshooting this! Thanks in advance for your help.

[mjrussell]

Read this section of the docs - https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions

[phyllisstein]

Oh gosh, what a horrible facepalm. Totally missed the bit about the middleware. Works beautifully after applying it as more-than-adequately documented:

import * as reducers from './reducers';
import {applyMiddleware, combineReducers, createStore} from 'redux';
import {routerMiddleware, routerReducer} from 'react-router-redux';
import {browserHistory} from 'react-router';
import createLogger from 'redux-logger';
import thunk from 'redux-thunk';

const rootReducer = combineReducers({
  ...reducers,
  routing: routerReducer
});
const middleware = applyMiddleware(
  createLogger(),
  routerMiddleware(browserHistory),
  thunk
);

export default createStore(
  rootReducer,
  middleware
);

Thanks for the pointer, and sorry for the bother!