Add first-class support for store enhancers to createStore() API

Author: gaearon

examples/async/store/configureStore.js

@@ -3,13 +3,12 @@ import thunkMiddleware from 'redux-thunk'
 import createLogger from 'redux-logger'
 import rootReducer from '../reducers'
 
-const createStoreWithMiddleware = applyMiddleware(
-  thunkMiddleware,
-  createLogger()
-)(createStore)
-
 export default function configureStore(initialState) {
-  const store = createStoreWithMiddleware(rootReducer, initialState)
+  const store = createStore(
+    rootReducer,
+    initialState,
+    applyMiddleware(thunkMiddleware, createLogger()),
+  )
 
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers

examples/real-world/store/configureStore.dev.js

@@ -8,13 +8,14 @@ import createLogger from 'redux-logger'
 import rootReducer from '../reducers'
 
 const reduxRouterMiddleware = syncHistory(browserHistory)
-const finalCreateStore = compose(
-  applyMiddleware(thunk, api, reduxRouterMiddleware, createLogger()),
-  DevTools.instrument()
-)(createStore)
 
 export default function configureStore(initialState) {
-  const store = finalCreateStore(rootReducer, initialState)
+  const store = createStore(
+    rootReducer,
+    initialState,
+    applyMiddleware(thunk, api, reduxRouterMiddleware, createLogger()),
+    DevTools.instrument()
+  )
 
   // Required for replaying actions from devtools to work
   reduxRouterMiddleware.listenForReplays(store)

examples/real-world/store/configureStore.prod.js

@@ -5,10 +5,10 @@ import thunk from 'redux-thunk'
 import api from '../middleware/api'
 import rootReducer from '../reducers'
 
-const finalCreateStore = compose(
-  applyMiddleware(thunk, api, syncHistory(browserHistory)),
-)(createStore)
-
 export default function configureStore(initialState) {
-  return finalCreateStore(rootReducer, initialState)
+  return createStore(
+    rootReducer,
+    initialState,
+    applyMiddleware(thunk, api, syncHistory(browserHistory))
+  )
 }

examples/shopping-cart/index.js

@@ -12,8 +12,10 @@ const middleware = process.env.NODE_ENV === 'production' ?
   [ thunk ] :
   [ thunk, logger() ]
 
-const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore)
-const store = createStoreWithMiddleware(reducer)
+const store = createStore(
+  reducer,
+  applyMiddleware(...middleware)
+)
 
 store.dispatch(getAllProducts())
 

examples/universal/common/store/configureStore.js

@@ -2,12 +2,12 @@ import { createStore, applyMiddleware } from 'redux'
 import thunk from 'redux-thunk'
 import rootReducer from '../reducers'
 
-const createStoreWithMiddleware = applyMiddleware(
-  thunk
-)(createStore)
-
 export default function configureStore(initialState) {
-  const store = createStoreWithMiddleware(rootReducer, initialState)
+  const store = createStore(
+    rootReducer,
+    initialState,
+    applyMiddleware(thunk)
+  )
 
   if (module.hot) {
     // Enable Webpack hot module replacement for reducers

src/createStore.js

@@ -1,4 +1,5 @@
 import isPlainObject from './utils/isPlainObject'
+import compose from './compose'
 
 /**
  * These are private action types reserved by Redux.
@@ -30,7 +31,15 @@ export var ActionTypes = {
  * @returns {Store} A Redux store that lets you read the state, dispatch actions
  * and subscribe to changes.
  */
-export default function createStore(reducer, initialState) {
+export default function createStore(reducer, initialState, ...enhancers) {
+  if (typeof initialState === 'function') {
+    enhancers.unshift(initialState)
+    initialState = undefined
+  }
+  if (enhancers.length > 0) {
+    return compose(...enhancers)(createStore)(reducer, initialState)
+  }
+
   if (typeof reducer !== 'function') {
     throw new Error('Expected the reducer to be a function.')
   }