title: React + Redux-router = Uncaught Error: Expected the reducer to be a function
body: <p>My code is working fine, but I have an annoying problem whenever I make a coding mistake and get a runtime error.  For instance, in one of my JSX pages I did <code>Date()</code> instead of <code>new Date()</code> and instead of reporting the actual error, I got... </p>
  
  <pre><code>Uncaught Error: Expected the reducer to be a function.
  </code></pre>
  
  <p>Any error I make almost always shows up as this.  It's being reported from <code>createStore.js</code>, which is in my <code>configureStore.jsx</code> code below.</p>
  
  <p>Is there a way that I can get better error reporting that helps me identify the real problem?  Any help or ideas are greatly appreciated!!!</p>
  
  <p>Here's my setup for reference....</p>
  
  <p><strong>main.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { ReduxRouter } from 'redux-router';
  import configureStore from './store/configureStore'
  import routes from './routes';
  
  const rootEl = document.getElementById('app-container');
  
  const store = configureStore();
  
  ReactDOM.render(
      &lt;div&gt;
          &lt;Provider store={store}&gt;
              &lt;ReduxRouter routes={routes} /&gt;
          &lt;/Provider&gt;
      &lt;/div&gt;
      , rootEl
  );
  </code></pre>
  
  <p><strong>configureStore.jsx</strong></p>
  
  <pre><code>import { createHashHistory } from 'history';
  import { applyMiddleware, createStore, compose } from 'redux';
  import { reduxReactRouter } from 'redux-router';
  
  import thunk from 'redux-thunk';
  import promiseMiddleware from 'redux-promise-middleware';
  
  import rootReducer from '../reducers/rootReducer';
  import routes from '../routes';
  
  export default function configureStore(initialState = {}) {
  
      const history = createHashHistory();
  
      const middlewares = [
          thunk,
          promiseMiddleware({
              promiseTypeSuffixes: ['PENDING','SUCCESS','ERROR']
          })
      ];
  
      const toolChain = [
          applyMiddleware(...middlewares),
          reduxReactRouter({
              routes,
              history
          })
      ];
  
      const store = compose(...toolChain)(createStore)(rootReducer, initialState);
  
      if (module.hot) {
          module.hot.accept('../reducers', () =&gt; {
              const nextRootReducer = require('../reducers/rootReducer');
              store.replaceReducer(nextRootReducer);
          });
      }
      return store;
  }
  </code></pre>
  
  <p><strong>rootReducer.jsx</strong></p>
  
  <pre><code>import { combineReducers } from 'redux';
  import { routerStateReducer } from 'redux-router';
  import siteReducer from './siteReducer';
  
  const rootReducer = combineReducers({
      router: routerStateReducer,
      sites: siteReducer
  });
  export default rootReducer;
  </code></pre>
  
  <p><strong>siteReducer.jsx</strong></p>
  
  <pre><code>import {GET_SITES} from '../actions/siteActions';
  
  const defaultState = {
      isPending: null,
      isSuccess: null,
      isError: null,
      error: null,
      data: null
  };
  
  export default function siteReducer(state = defaultState, action) {
  
      switch (action.type) {
          case `${GET_SITES}_PENDING`:
              return {
                  ...defaultState,
                  isPending: true
              };
          case `${GET_SITES}_SUCCESS`:
              return {
                  ...defaultState,
                  isSuccess: true,
                  error: false,
                  data: action.payload
              };
          case `${GET_SITES}_ERROR`:
              return {
                  ...defaultState,
                  isError: true,
                  error: action.payload
              };
          default:
              return state;
      }
  }
  </code></pre>