Uncaught Error: Expected the enhancer to be a function

Question

I am trying to call the reducer from the component and want to render that in component , but when I am trying to store the reducer in the createStore() method of redux above error is coming. My Code is like this:-

import { applyMiddleware, compose, createStore } from 'redux'
import thunk from 'redux-thunk'
import { browserHistory } from 'react-router'
import makeRootReducer from './reducers'
import { updateLocation } from './location'
import allReducers from './reducers';

export default (initialState = {}) => {
  // ======================================================
  // Middleware Configuration
  // ======================================================
  const middleware = [thunk]

  // ======================================================
  // Store Enhancers
  // ======================================================
  const enhancers = []

  let composeEnhancers = compose

  if (__DEV__) {
    const composeWithDevToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    if (typeof composeWithDevToolsExtension === 'function') {
      composeEnhancers = composeWithDevToolsExtension
    }
  }

  // ======================================================
  // Store Instantiation and HMR Setup
  // ======================================================
  const store = createStore(
    allReducers,
    makeRootReducer(),
    initialState,

    composeEnhancers(
      applyMiddleware(...middleware),
      ...enhancers
    )
  )

I am getting error :Uncaught Error: Expected the enhancer to be a function

Answer 1

You are passing in two reducers to the createStore function instead of one.

Since the third argument to createStore is always the enhancer function it thinks that the 'initiaeState' variable is an enhancer function since you are passing this in as the thid argument to createStore.

createStore expects to receive the following arguments:

1. reducer (Function): A reducing function that returns the next state tree, given the current state tree and an action to handle.

2. [preloadedState] (any): The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your reducer can understand.

3. [enhancer] (Function): The store enhancer. You may optionally specify it to enhance the store with third-party capabilities such as middleware, time travel, persistence, etc. The only store enhancer that ships with Redux is applyMiddleware().

Remember the root reducer in your app should combine all your reducers into one single reducer.

From the Redux docs

First and foremost, it's important to understand that your entire application really only has one single reducer function

Answer 2

I encountered a similar error TypeError: enhancer(...) is not a function because I was passing a function instead of a plain object as the initial state.

Ie my error was due to missing brackets on my initial state generator function:

const store = createStore(         
    reducer,                       
    testState,  // <<< missing brackets!! doh                 
    applyMiddleware(sagaMiddleware)
  )     

When it should have been:

const store = createStore(         
    reducer,                       
    testState(),                   
    applyMiddleware(sagaMiddleware)
  )