From ddc8be27eb3ada5eea2a3cfdb518ed75f66ecafa Mon Sep 17 00:00:00 2001 From: Barry Staes Date: Fri, 15 Jan 2016 14:05:37 +0100 Subject: [PATCH 1/5] Added minimal working demo of redux-devtools --- package.json | 7 ++++++- src/containers/App.js | 4 ++++ src/containers/DevTools.js | 10 ++++++++++ src/store/configureStore.js | 12 ++++++++++-- 4 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 src/containers/DevTools.js diff --git a/package.json b/package.json index 96ac94c73..12effb7ce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slingshot", - "version": "1.0.1", + "version": "1.0.3", "description": "Starter kit for creating apps with React and Redux", "scripts": { "prestart": "npm run remove-dist", @@ -20,6 +20,9 @@ "test:watch": "npm run test -- --watch" }, "author": "Cory House", + "contributors": [ + "Barry Staes (http://barrystaes.nl/)" + ], "license": "MIT", "dependencies": { "object-assign": "4.0.1", @@ -50,6 +53,8 @@ "react-transform-catch-errors": "1.0.0", "react-transform-hmr": "1.0.1", "redbox-react": "1.2.0", + "redux-devtools": "3.0.1", + "redux-devtools-log-monitor": "1.0.2", "rimraf": "2.5.0", "sass-loader": "3.1.2", "style-loader": "0.12.3", diff --git a/src/containers/App.js b/src/containers/App.js index 71b5a4bf2..9c5f20b3a 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -5,13 +5,17 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import FuelSavingsApp from '../components/FuelSavingsApp'; import * as FuelSavingsActions from '../actions/fuelSavingsActions'; +import DevTools from './DevTools'; class App extends React.Component { render() { const { fuelSavingsAppState, actions } = this.props; return ( +
+ +
); } } diff --git a/src/containers/DevTools.js b/src/containers/DevTools.js new file mode 100644 index 000000000..2d01e679d --- /dev/null +++ b/src/containers/DevTools.js @@ -0,0 +1,10 @@ +import React from 'react'; + +import { createDevTools } from 'redux-devtools'; +import LogMonitor from 'redux-devtools-log-monitor'; + +const DevTools = createDevTools( + +); + +export default DevTools; diff --git a/src/store/configureStore.js b/src/store/configureStore.js index 8d07ed66d..b35986848 100644 --- a/src/store/configureStore.js +++ b/src/store/configureStore.js @@ -2,11 +2,19 @@ //This boilerplate file is likely to be the same for each project that uses Redux. //With Redux, the actual stores are in /reducers. -import { createStore } from 'redux'; +import { createStore, compose } from 'redux'; import rootReducer from '../reducers'; +import DevTools from '../containers/DevTools'; + +const finalCreateStore = compose( + // Middleware you want to use in development: + //applyMiddleware(d1, d2, d3), + // Required! Enable Redux DevTools with the monitors you chose + DevTools.instrument() +)(createStore); export default function configureStore(initialState) { - const store = createStore(rootReducer, initialState); + const store = finalCreateStore(rootReducer, initialState); if (module.hot) { // Enable Webpack hot module replacement for reducers From 173b243651359f158e06238d2f1f3eb6edf4e4ef Mon Sep 17 00:00:00 2001 From: Barry Staes Date: Tue, 19 Jan 2016 09:17:21 +0100 Subject: [PATCH 2/5] Rename for proper redux-devtools usage (in debug only) --- src/store/{configureStore.js => configureStore.dev.js} | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) rename src/store/{configureStore.js => configureStore.dev.js} (85%) diff --git a/src/store/configureStore.js b/src/store/configureStore.dev.js similarity index 85% rename from src/store/configureStore.js rename to src/store/configureStore.dev.js index b35986848..5e53ed023 100644 --- a/src/store/configureStore.js +++ b/src/store/configureStore.dev.js @@ -1,4 +1,4 @@ -//This file merely configures the store for hot reloading. +//Remember to keep the production/development version of this file in sync. //This boilerplate file is likely to be the same for each project that uses Redux. //With Redux, the actual stores are in /reducers. @@ -14,8 +14,10 @@ const finalCreateStore = compose( )(createStore); export default function configureStore(initialState) { + // Add middleware const store = finalCreateStore(rootReducer, initialState); + // Configure the store for hot reloading if (module.hot) { // Enable Webpack hot module replacement for reducers module.hot.accept('../reducers', () => { From 9cd2cd87033b41631a312ea1c894bb09700538bd Mon Sep 17 00:00:00 2001 From: Barry Staes Date: Tue, 19 Jan 2016 09:20:17 +0100 Subject: [PATCH 3/5] Include and use redux-devtools store middleware (only) in development build. --- src/store/configureStore.js | 7 +++++++ src/store/configureStore.prod.js | 17 +++++++++++++++++ webpack.config.js | 3 +++ 3 files changed, 27 insertions(+) create mode 100644 src/store/configureStore.js create mode 100644 src/store/configureStore.prod.js diff --git a/src/store/configureStore.js b/src/store/configureStore.js new file mode 100644 index 000000000..1d2145de5 --- /dev/null +++ b/src/store/configureStore.js @@ -0,0 +1,7 @@ +// Use DefinePlugin (Webpack) or loose-envify (Browserify) +// together with Uglify to strip the dev branch in prod build. +if (process.env.NODE_ENV === 'production') { + module.exports = require('./configureStore.prod'); +} else { + module.exports = require('./configureStore.dev'); +} diff --git a/src/store/configureStore.prod.js b/src/store/configureStore.prod.js new file mode 100644 index 000000000..30b508fb3 --- /dev/null +++ b/src/store/configureStore.prod.js @@ -0,0 +1,17 @@ +//Remember to keep the production/development version of this file in sync. +//This boilerplate file is likely to be the same for each project that uses Redux. +//With Redux, the actual stores are in /reducers. + +import { createStore, compose } from 'redux'; +import rootReducer from '../reducers'; + +const finalCreateStore = compose( + // Middleware you want to use in production: + //applyMiddleware(d1, d2, d3), + // Other store enhancers if you use any +)(createStore); + +export default function configureStore(initialState) { + // Add middleware + return finalCreateStore(rootReducer, initialState); +} diff --git a/webpack.config.js b/webpack.config.js index 30d7e9c53..0ad29186c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -26,6 +26,9 @@ var getPlugins = function(env) { break; } + // This allows DevTools component to be included + plugins.push(new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify(env)})); + return plugins; }; From a5f302397403bb4249886501c5701864f63020c2 Mon Sep 17 00:00:00 2001 From: Barry Staes Date: Tue, 19 Jan 2016 09:22:57 +0100 Subject: [PATCH 4/5] Include and show redux-devtools window (only) in development build. --- src/containers/App.js | 1 - src/index.js | 5 +++++ src/showDevTools.js | 17 +++++++++++++++++ 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/showDevTools.js diff --git a/src/containers/App.js b/src/containers/App.js index 9c5f20b3a..15e645bb4 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -14,7 +14,6 @@ class App extends React.Component { return (
-
); } diff --git a/src/index.js b/src/index.js index bc956481f..d9dcbcf71 100755 --- a/src/index.js +++ b/src/index.js @@ -12,3 +12,8 @@ render( , document.getElementById('app') ); + +if (process.env.NODE_ENV !== 'production') { + const showDevTools = require('./showDevTools'); + showDevTools(store); +} diff --git a/src/showDevTools.js b/src/showDevTools.js new file mode 100644 index 000000000..d69bb4566 --- /dev/null +++ b/src/showDevTools.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { render } from 'react-dom'; +import DevTools from './containers/DevTools'; + +export default function showDevTools(store) { + const popup = window.open(null, 'Redux DevTools', 'menubar=no,location=no,resizable=yes,scrollbars=no,status=no'); + // Reload in case it already exists + popup.location.reload(); + + setTimeout(() => { + popup.document.write('
'); + render( + , + popup.document.getElementById('react-devtools-root') + ); + }, 10); +} From 79c55de28d8e0030a7aa8f83a45be806e43f58dc Mon Sep 17 00:00:00 2001 From: Barry Staes Date: Tue, 19 Jan 2016 11:16:54 +0100 Subject: [PATCH 5/5] Fix no need to always import DevTools component. --- src/containers/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/containers/App.js b/src/containers/App.js index 15e645bb4..65ac3e0de 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -5,7 +5,6 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import FuelSavingsApp from '../components/FuelSavingsApp'; import * as FuelSavingsActions from '../actions/fuelSavingsActions'; -import DevTools from './DevTools'; class App extends React.Component { render() {