React-Redux createStore throwing "Error: Expected the reducer to be a function" when combineReducer passed in

Question

Good evening, It seems that I am having some issue with the createStore function.

This is the entire store.js file

// Import required redux functions
import { createStore, applyMiddleware, compose } from 'redux';
// Import thunk for async redux reducers
import thunk from 'redux-thunk';
// import the main reducer
import rootReducer from './reducers';
console.log(rootReducer); // log the value of the root reducer to the console for inspection
// Define the store as a constant so it acts like a singleton (for authentication reasons this is helpfull)
const store = createStore(rootReducer, compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension : f => f
));
console.log(store); // log the store to the console for inspection (does not happen)
// export it as the default object
export default store;

And the simple reducers/index.js file:

// Import the core function
import { combineReducers } from 'redux';
// Import all the reducers
import loginReducer from './loginReducer'; // a simple working reducer for handling the jwt token

console.log(loginReducer); // log the reducer for inspection
// export the combination of reducers within their own subroutes
const rootReducer = combineReducers({
  // TODO add reducers with keys like so
  login: loginReducer,
});

export default rootReducer;

And the loginreducer.js file:

// the default state configuration
const initialState = {logged_in: false, error: null, token: null}
// login reducer
export default (state = initialState, action) => {
  switch (action.type) { // check the type of action that was passed in
    case "LOGIN_ERROR": // error during the login process
      return {logged_in: false, error: action.error, token: null}
    case "LOGIN_SUCCESS": // login was successfull or....
    case "LOGIN_NEW_TOKEN": // client has recived a new token
      return {logged_in: true, error: null, token: action.token}
    case "LOG_OUT": // the client has logged out
      localStorage.removeItem('token'); // remove the token from storage
      return initialState // return the inital state (not logged in)
    default:
      return state // return the current state (a.k.a take no action)
  }
}

This throws the custom error Error: Expected the reducer to be a function defined on line 46 (https://github.com/reactjs/redux/blob/master/src/createStore.js#L46, 55 in the built version) of createStore.js:

if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function.');
  }

However, when I use the chrome debugging tools to save the rootReducer to the console (as temp1) and check it's type it is indeed "function".

adding a breakpoint on the condition in createStore.js shows me that reducer is set to undefined, any idea how it can be defined for the console.log call but is not defined when it is passed to a function on the next line?

Any ideas on what I am doing wrong?

Answer 1

Good evening,

I found the issue. in store.js I forgot to add () after the devToolsExtension call. or in other words this:

window.devToolsExtension ? window.devToolsExtension : f => f

should look like this:

window.devToolsExtension ? window.devToolsExtension() : f => f

Simple but annoying.