React+Redux - Expected the reducer to be a function

Question

I'm trying to implement redux in my universal app, but I've some problems with redux. I've this configureStore function:

import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger'
import rootReducer from '../reducers/index';
import { routerMiddleware } from 'react-router-redux';

export default function configureStore(history, initialState) {
  const reduxRouterMiddleware = routerMiddleware(history);
  let finalCreateStore;

  if (__DEVELOPMENT__ && __CLIENT__ && __DEVTOOLS__) {
    const { persistState } = require('redux-devtools');
    const DevTools = require('../containers/DevTools/DevTools');

    finalCreateStore = compose(
      applyMiddleware(thunkMiddleware)(createStore),
      window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument(),
      persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
    )(createStore);
  }
  else {
    finalCreateStore = applyMiddleware(thunkMiddleware)(createStore);
  }

  const store = finalCreateStore(rootReducer, initialState);

  if (__DEVELOPMENT__ && module.hot) {
    module.hot.accept(rootReducer, () => {
      store.replaceReducer(rootReducer);
    });
  }

  return store;
}

And then I've my rootReducer file that looks like this:

import { combineReducers } from 'redux';
import environment from './environment';
import general from './general';
import alert from './alert';
import user from './user';
import { routerReducer } from 'react-router-redux'


const rootReducer = combineReducers({
  environment,
  general,
  alert,
  user,
  routing: routerReducer
});

export default rootReducer;

The problem is that I get this error: Expected the reducer to be a function. I've googled and searched on StackOverflow(where there are some similar problems), but the answers doesn't works in my case.

So, what I'm doing wrong ? and why ?

Thanks.

Does `./general`, `./environment`, `./alert` and `./user` all have an `export default` that is a function? — ivarni, May 05 '16 at 09:44
@ivarni is like this: https://gist.github.com/inchr/60ddb797a659e7d34ae145122b1b3187 so: export default function nameReducer(){...} — Noah, May 05 '16 at 09:54
Try using `console.log` on all of your reducers in the `rootReducer` file to see which one of them is not a function — Sam P, May 05 '16 at 10:15
@SamP are alla functions... https://www.dropbox.com/s/tbe8rfgefbykg3m/Screenshot%202016-05-05%2012.21.52.png?dl=0 and in console too says: [1] [Function: environment] [1] [Function: general] [1] [Function: user] [1] [Function: user] [1] [Function: routerReducer] — Noah, May 05 '16 at 10:22
@Noah does the error occur before React is able to mount or afterwards? — Sam P, May 05 '16 at 10:42
How can I test it ? btw I see this error in browser console, after I load the page. — Noah, May 05 '16 at 10:47
@SamP is correct that when I do console.log(rootReducer), it says: [Function: combination] ? — Noah, May 05 '16 at 11:14

score 2 · Accepted Answer · answered May 05 '16 at 12:32

2

try this:

finalCreateStore = compose(
    // you write more than one createStore here
    applyMiddleware(thunkMiddleware),
    window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument(),
    persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)(createStore);

answered May 05 '16 at 12:32

Malcolm Yu

126
1
6

I've already fixed(sorry I got a busy day and I forgot to reply here)...btw this was the problem. – Noah May 06 '16 at 00:49
Removing that extraneous `(createStore)` --- which I had copied from similar code but with different syntax --- was what solved it for me. – Ryan H. Nov 06 '16 at 19:54

rajatppn · Answer 2 · 2016-05-05T10:26:49.583

0

Have you tried

import { combineReducers } from 'redux';
import environment from './environment';
import general from './general';
import alert from './alert';
import user from './user'; 
import { routerReducer } from 'react-router-redux'


export const rootReducer = combineReducers({
  environment: environment,
  general: general,
  alert: alert,
  user: user,
 routing: routerReducer
});

export default rootReducer;

edited May 05 '16 at 10:26

answered May 05 '16 at 10:05

rajatppn

320
1
6

Yes :( same error...(I've read this solution also on another post here on stackoverflow) – Noah May 05 '16 at 10:10

React+Redux - Expected the reducer to be a function

2 Answers2