I'm working toward having my React/Redux app update the URL based on actions. I've done quite a bit of looking around. I thought I had a handle on it, but obviously I'm missing something. I have other reducers that respond correctly.

Currently, I'm just trying to log the action.

Routing Reducer

const initialState = { locationBeforeTransitions: null };

export default function routing(state = initialState, action)
{
  switch (action.type)
  {
    case 'LOCATION_CHANGE':
      console.log(action)

    default:
      return state

  }

}

Store

/*
  Things from other people
 */

import { createStore, applyMiddleware, pose } from 'redux'
import { syncHistoryWithStore }                  from 'react-router-redux';
import { browserHistory }                        from 'react-router'
import   thunkMiddleware                         from 'redux-thunk'
import   createLogger                            from 'redux-logger'

/*
  Things from us
 */

import { fetchSuitesAndFails, fetchResults } from './actions/actions';
import   rootReducer                         from './reducers/index'

const enhancers = pose(
  window.devToolsExtension ? window.devToolsExtension() : f => f
);

const loggerMiddleware = createLogger()

/*
  Store
*/

export const store = createStore(
  rootReducer,
  enhancers,
  applyMiddleware(
    thunkMiddleware, // lets us dispatch() functions
    loggerMiddleware // neat middleware that logs actions
  )
);

// Export the history so we can keep track of things
export const history = syncHistoryWithStore(browserHistory, store);


/*
  Enable Hot Reloading for the reducers
  We re-require() the reducers whenever any new code has been written.
  Webpack will handle the rest
*/

if (module.hot) {
  // Enable Webpack hot module replacement for reducers
  module.hot.accept('./reducers/index', () => {
    const nextRootReducer = require('./reducers/index').default
    store.replaceReducer(nextRootReducer)
  })
}

Index

/*
  React router needs
*/
import { bineReducers } from 'redux'
import { routerReducer }   from 'react-router-redux'

/*
  Reducers
*/
import suite          from './suite'
import suitesandfails from './suitesandfails'
import routing        from './routing'


/*
  Put them all together and return a single reducer
*/
const rootReducer = bineReducers({
  suite,
  suitesandfails,
  routing,
  routing: routerReducer
})

export default rootReducer

I'm working toward having my React/Redux app update the URL based on actions. I've done quite a bit of looking around. I thought I had a handle on it, but obviously I'm missing something. I have other reducers that respond correctly.

Currently, I'm just trying to log the action.

Routing Reducer

const initialState = { locationBeforeTransitions: null };

export default function routing(state = initialState, action)
{
  switch (action.type)
  {
    case 'LOCATION_CHANGE':
      console.log(action)

    default:
      return state

  }

}

Store

/*
  Things from other people
 */

import { createStore, applyMiddleware, pose } from 'redux'
import { syncHistoryWithStore }                  from 'react-router-redux';
import { browserHistory }                        from 'react-router'
import   thunkMiddleware                         from 'redux-thunk'
import   createLogger                            from 'redux-logger'

/*
  Things from us
 */

import { fetchSuitesAndFails, fetchResults } from './actions/actions';
import   rootReducer                         from './reducers/index'

const enhancers = pose(
  window.devToolsExtension ? window.devToolsExtension() : f => f
);

const loggerMiddleware = createLogger()

/*
  Store
*/

export const store = createStore(
  rootReducer,
  enhancers,
  applyMiddleware(
    thunkMiddleware, // lets us dispatch() functions
    loggerMiddleware // neat middleware that logs actions
  )
);

// Export the history so we can keep track of things
export const history = syncHistoryWithStore(browserHistory, store);


/*
  Enable Hot Reloading for the reducers
  We re-require() the reducers whenever any new code has been written.
  Webpack will handle the rest
*/

if (module.hot) {
  // Enable Webpack hot module replacement for reducers
  module.hot.accept('./reducers/index', () => {
    const nextRootReducer = require('./reducers/index').default
    store.replaceReducer(nextRootReducer)
  })
}

Index

/*
  React router needs
*/
import { bineReducers } from 'redux'
import { routerReducer }   from 'react-router-redux'

/*
  Reducers
*/
import suite          from './suite'
import suitesandfails from './suitesandfails'
import routing        from './routing'


/*
  Put them all together and return a single reducer
*/
const rootReducer = bineReducers({
  suite,
  suitesandfails,
  routing,
  routing: routerReducer
})

export default rootReducer

• javascript
• reactjs
• redux
• react-router
• react-router-redux

• have you added routing to the rootReducer? – vijayst Commented Aug 6, 2016 at 7:54
• I did. I updated to show. – Will Luce Commented Aug 6, 2016 at 7:58
• What code is dispatching the action? There could be a bug there before the reducer. – The Brofessor Commented Aug 6, 2016 at 8:01
• I have never assigned two reducers to the same property in bineReducers. Is the first reducer not getting called because of double assignment? Not sure though. – vijayst Commented Aug 6, 2016 at 8:02
• React-router-redux dispatches the action. It shows up in the Dev tools. – Will Luce Commented Aug 6, 2016 at 8:02

2 Answers 2

you can use string "@@router/LOCATION_CHANGE" to catch the action.

react-router-redux provides const for that

import { LOCATION_CHANGE } from 'react-router-redux'

....
case LOCATION_CHANGE:
      console.warn('LOCATION_CHANGE from your reducer',action)
      return state

webpackbin DEMO

routerReducer code from react-router-redux

You can also import the constant from the 'react-router-redux'.

import { LOCATION_CHANGE } from 'react-router-redux'
 ...
 case LOCATION_CHANGE:
     console.warn('LOCATION_CHANGE from your reducer',action)
     return state