react-router-redux: Routes change but components are not displayed

Question

I'm attempting to set up routing using react-router-redux with Immutable.js reducers.

I've set up the store using syncHistoryWithStore, and when I click on a Link, I can see that the correct @@router/LOCATION_CHANGE action is dispatched, that the store is correctly updated with the location information to the routing key of the base reducer, and that the URL is changing to the correct location.

The problem is that the components do not update. If I load the page at a specific location, I see the correct component, but no other components are displayed once I click a Link after that.

I've included what I think are the relevant files (with some irrelevant information redacted):

initialize.js:

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'
import { browserHistory } from 'react-router'
import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux'
import reducers from 'reducers'

const browserHistoryRouterMiddleware = routerMiddleware(browserHistory)

const middlewares = [browserHistoryRouterMiddleware]

/* Create store */
const store = createStore(
  reducers,
  undefined,
  composeWithDevTools(
    applyMiddleware(...middlewares),
  ),
)

/* Configure history */
const createSelectLocationState = () => {
  let prevRoutingState, prevRoutingStateJS

  return (state) => {
    const routingState = state.get('routing')
    if (typeof prevRoutingState === 'undefined' || prevRoutingState !== routingState) {
      prevRoutingState = routingState
      prevRoutingStateJS = routingState.toJS()
    }
    return prevRoutingState
  }
}

const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: createSelectLocationState(),
})

export { store, history }

index.js:

import React from 'react'
import { render } from 'react-dom'
import { store, history } from 'initialize'
import Root from 'components/Root'

render(
  <Root store={store} history={history} />,
  document.getElementById('root')
)

Root.js:

import React, { PropTypes } from 'react'
import { Provider } from 'react-redux'
import { Router } from 'react-router'
import routes from 'routes'

const Root = ({ store, history }) => (
  <Provider store={store}>
    <Router history={history}>
      {routes}
    </Router>
  </Provider>
)

Root.propTypes = {
  store: PropTypes.object.isRequired,
}

export default Root

routes is just a nested list of Route and IndexRoute components, starting with <Route path='/' component={App} />. When I console.log App's children prop, I can see that there are children passed when it first renders and it correctly renders them, but at no other point do I see any more console feedback on children changing.

Logged action (state is an Immutable Map, but I run toJS() for logging purposes):

What am I missing that should change the displayed components as I move through my routes?

Answer 1

The problem was that I was returning prevRoutingState from createSelectLocationHistory rather than prevRoutingStateJS.