Refactor examples to use configureStore

examples/basic/src/configureStore.js

@@ -0,0 +1,29 @@
+import { createBrowserHistory } from 'history'
+import { applyMiddleware, compose, createStore } from 'redux'
+import { routerMiddleware } from 'connected-react-router'
+import createRootReducer from './reducers'
+
+export const history = createBrowserHistory()
+
+export default function configureStore(preloadedState) {
+  const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
+  const store = createStore(
+    createRootReducer(history),
+    preloadedState,
+    composeEnhancer(
+      applyMiddleware(
+        routerMiddleware(history),
+      ),
+    ),
+  )
+
+  // Hot reloading
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('./reducers', () => {
+      store.replaceReducer(createRootReducer(history));
+    });
+  }
+
+  return store
+}

examples/basic/src/index.js

@@ -1,25 +1,11 @@
 import { AppContainer } from 'react-hot-loader'
-import { applyMiddleware, compose, createStore } from 'redux'
-import { createBrowserHistory } from 'history'
-import { routerMiddleware } from 'connected-react-router'
 import { Provider } from 'react-redux'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
-import rootReducer from './reducers'
-
-const history = createBrowserHistory()
-
-const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-const store = createStore(
-  rootReducer(history),
-  composeEnhancer(
-    applyMiddleware(
-      routerMiddleware(history),
-    ),
-  ),
-)
+import configureStore, { history } from './configureStore'
 
+const store = configureStore()
 const render = () => {
   ReactDOM.render(
     <AppContainer>
@@ -39,9 +25,4 @@ if (module.hot) {
   module.hot.accept('./App', () => {
     render()
   })
-
-  // Reload reducers
-  module.hot.accept('./reducers', () => {
-    store.replaceReducer(rootReducer(history))
-  })
 }

examples/immutable/src/configureStore.js

@@ -0,0 +1,29 @@
+import { createBrowserHistory } from 'history'
+import { applyMiddleware, compose, createStore } from 'redux'
+import { routerMiddleware } from 'connected-react-router'
+import createRootReducer from './reducers'
+
+export const history = createBrowserHistory()
+
+export default function configureStore(preloadedState) {
+  const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
+  const store = createStore(
+    createRootReducer(history),
+    preloadedState,
+    composeEnhancer(
+      applyMiddleware(
+        routerMiddleware(history),
+      ),
+    ),
+  )
+
+  // Hot reloading
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('./reducers', () => {
+      store.replaceReducer(createRootReducer(history));
+    });
+  }
+
+  return store
+}

examples/immutable/src/index.js

@@ -1,28 +1,13 @@
 import { AppContainer } from 'react-hot-loader'
-import { applyMiddleware, compose, createStore } from 'redux'
-import { createBrowserHistory } from 'history'
-import { routerMiddleware } from 'connected-react-router/immutable'
 import { Provider } from 'react-redux'
 import Immutable from 'immutable'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
-import rootReducer from './reducers'
-
-const history = createBrowserHistory()
+import configureStore, { history } from './configureStore'
 
 const initialState = Immutable.Map()
-const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-const store = createStore(
-  rootReducer(history),
-  initialState,
-  composeEnhancer(
-    applyMiddleware(
-      routerMiddleware(history),
-    ),
-  ),
-)
-
+const store = configureStore(initialState)
 const render = () => {
   ReactDOM.render(
     <AppContainer>
@@ -42,9 +27,4 @@ if (module.hot) {
   module.hot.accept('./App', () => {
     render()
   })
-
-  // Reload reducers
-  module.hot.accept('./reducers', () => {
-    store.replaceReducer(rootReducer(history))
-  })
 }

examples/typescript/src/configureStore.tsx

@@ -0,0 +1,29 @@
+import { createBrowserHistory } from 'history'
+import { applyMiddleware, compose, createStore } from 'redux'
+import { routerMiddleware } from 'connected-react-router'
+import createRootReducer from './reducers'
+
+export const history = createBrowserHistory()
+
+export default function configureStore(preloadedState) {
+  const composeEnhancer: typeof compose = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
+  const store = createStore(
+    createRootReducer(history),
+    preloadedState,
+    composeEnhancer(
+      applyMiddleware(
+        routerMiddleware(history),
+      ),
+    ),
+  )
+
+  // Hot reloading
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('./reducers', () => {
+      store.replaceReducer(createRootReducer(history));
+    });
+  }
+
+  return store
+}

examples/typescript/src/index.tsx

@@ -1,24 +1,9 @@
 import { AppContainer } from 'react-hot-loader'
-import { applyMiddleware, compose, createStore } from 'redux'
-import { createBrowserHistory } from 'history'
-import { routerMiddleware } from 'connected-react-router'
 import { Provider } from 'react-redux'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
-import rootReducer from './reducers'
-
-const history = createBrowserHistory()
-
-const composeEnhancer: typeof compose = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-const store = createStore(
-  rootReducer(history),
-  composeEnhancer(
-    applyMiddleware(
-      routerMiddleware(history),
-    ),
-  ),
-)
+import configureStore, { history } from './configureStore'
 
 const render = () => {
   ReactDOM.render(
@@ -39,9 +24,4 @@ if (module.hot) {
   module.hot.accept('./App', () => {
     render()
   })
-
-  // Reload reducers
-  module.hot.accept('./reducers', () => {
-    store.replaceReducer(rootReducer(history))
-  })
 }