🐛 Du code de développement était chargé en production

source/containers/App.dev.js

@@ -1,19 +1,13 @@
-import React, { Component } from 'react'
-
-import { Provider } from 'react-redux'
+import React from 'react'
 import DevTools from '../DevTools'
+import { Provider } from 'react-redux'
 import Layout from './Layout'
 
-export default class App extends Component {
-	render() {
-		const { store } = this.props
-		return (
-			<Provider store={store}>
-				<div>
-					<Layout />
-					<DevTools />
-				</div>
-			</Provider>
-		)
-	}
-}
+export default ({ store }) => (
+	<Provider store={store}>
+		<div id="dev">
+			<Layout />
+			<DevTools />
+		</div>
+	</Provider>
+)

source/containers/App.js

@@ -1,3 +0,0 @@
-if (process.env.NODE_ENV === 'production')
-	module.exports = require('./App.prod')
-else module.exports = require('./App.dev')

source/containers/App.prod.js

@@ -1,18 +0,0 @@
-// App.dev without the redux DevTools
-import React, { Component } from 'react'
-
-import { Provider } from 'react-redux'
-import Layout from './Layout'
-
-export default class App extends Component {
-	render() {
-		const { store } = this.props
-		return (
-			<Provider store={store}>
-				<div>
-					<Layout />
-				</div>
-			</Provider>
-		)
-	}
-}

source/containers/Layout.css

@@ -10,7 +10,7 @@ body {
 	background: white;
 }
 #js,
-#js > div {
+#dev {
 	height: 100%;
 }
 

source/entry.dev.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { compose, createStore, applyMiddleware } from 'redux'
+import reducers from './reducers'
+import DevTools from './DevTools'
+import { AppContainer } from 'react-hot-loader'
+import debounceFormChangeActions from './debounceFormChangeActions'
+import computeThemeColours from './components/themeColours'
+import { getIframeOption, getUrl } from './utils'
+
+import App from './containers/App.dev'
+
+let initialStore = {
+	iframe: getUrl().includes('iframe'),
+	themeColours: computeThemeColours(getIframeOption('couleur'))
+}
+
+let enhancer = compose(
+	applyMiddleware(debounceFormChangeActions()),
+	DevTools.instrument()
+)
+
+let store = createStore(reducers, initialStore, enhancer)
+let anchor = document.querySelector('#js')
+
+render(<App store={store} />, anchor)
+
+// Hot react component reloading. Unstable but helpful.
+if (module.hot) {
+	module.hot.accept('./containers/App.dev', () => {
+		render(
+			<AppContainer>
+				<App store={store} />
+			</AppContainer>,
+			anchor
+		)
+	})
+}
+
+export { anchor }

source/entry.js

@@ -1,42 +1,3 @@
-import React from 'react'
-import { render } from 'react-dom'
-import { compose, createStore, applyMiddleware } from 'redux'
-import App from './containers/App'
-import reducers from './reducers'
-import DevTools from './DevTools'
-import { AppContainer } from 'react-hot-loader'
-import debounceFormChangeActions from './debounceFormChangeActions'
-import computeThemeColours from './components/themeColours'
-import { getIframeOption, getUrl } from './utils'
-
-let initialStore = {
-	iframe: getUrl().includes('iframe'),
-	themeColours: computeThemeColours(getIframeOption('couleur'))
-}
-
-let createStoreWithMiddleware = applyMiddleware(debounceFormChangeActions())(
-	createStore
-)
-
-let store = createStoreWithMiddleware(
-	reducers,
-	initialStore,
-	compose(DevTools.instrument())
-)
-let anchor = document.querySelector('#js')
-
-render(<App store={store} />, anchor)
-
-// Hot react component reloading. Unstable but helpful.
-if (module.hot) {
-	module.hot.accept('./containers/App', () => {
-		render(
-			<AppContainer>
-				<App store={store} />
-			</AppContainer>,
-			anchor
-		)
-	})
-}
-
-export { anchor }
+if (process.env.NODE_ENV === 'production')
+	module.exports = require('./entry.prod')
+else module.exports = require('./entry.dev')

source/entry.prod.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { compose, createStore, applyMiddleware } from 'redux'
+import reducers from './reducers'
+import debounceFormChangeActions from './debounceFormChangeActions'
+import computeThemeColours from './components/themeColours'
+import { getIframeOption, getUrl } from './utils'
+import { Provider } from 'react-redux'
+import Layout from './containers/Layout'
+
+let initialStore = {
+	iframe: getUrl().includes('iframe'),
+	themeColours: computeThemeColours(getIframeOption('couleur'))
+}
+
+let enhancer = compose(applyMiddleware(debounceFormChangeActions()))
+
+let store = createStore(reducers, initialStore, enhancer)
+let anchor = document.querySelector('#js')
+
+render(
+	<Provider store={store}>
+		<Layout />
+	</Provider>,
+	anchor
+)
+
+export { anchor }