Merge pull request #229 from Osmose/devtools

Add Redux DevTools
This commit is contained in:
Mike Cooper 2016-09-09 10:14:05 -07:00 коммит произвёл GitHub
Родитель 9ef7ed6737 562d20f816
Коммит 5762923101
9 изменённых файлов: 61 добавлений и 42 удалений

Просмотреть файл

@ -3,6 +3,9 @@ parser: babel-eslint
plugins: plugins:
- jasmine - jasmine
- babel - babel
globals:
PRODUCTION: false
DEVELOPMENT: false
rules: rules:
arrow-parens: [off] arrow-parens: [off]
no-console: [off] no-console: [off]

Просмотреть файл

@ -1,10 +1,12 @@
import React, { PropTypes as pt } from 'react'; import React, { PropTypes as pt } from 'react';
import Header from './Header.js'; import Header from './Header.js';
import Notifications from './Notifications.js'; import Notifications from './Notifications.js';
import DevTools from './DevTools.js';
export default function ControlApp({ children, location, routes, params }) { export default function ControlApp({ children, location, routes, params }) {
return ( return (
<div> <div>
{DEVELOPMENT && <DevTools />}
<Notifications /> <Notifications />
<Header <Header
pageType={children.props.route} pageType={children.props.route}

Просмотреть файл

@ -0,0 +1,16 @@
import React from 'react';
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';
const DevTools = createDevTools(
<DockMonitor
toggleVisibilityKey="ctrl-h"
changePositionKey="ctrl-q"
defaultIsVisible={false}
>
<LogMonitor theme="tomorrow" />
</DockMonitor>
);
export default DevTools;

Просмотреть файл

@ -199,23 +199,6 @@ tbody {
} }
} }
/* Unordered List */
li {
list-style-type: none;
padding: 25px;
&:nth-child(even) {
background: rgba($cream, 0.5);
}
&:hover {
background: rgba(26, 183, 218, 0.1);
cursor: pointer;
}
}
/* Icons */ /* Icons */
i { i {
&.pre { margin-right: 5px; } &.pre { margin-right: 5px; }

Просмотреть файл

@ -1,13 +1,24 @@
import { createStore, applyMiddleware, combineReducers } from 'redux'; import { compose, createStore, applyMiddleware, combineReducers } from 'redux';
import { browserHistory } from 'react-router'; import { browserHistory } from 'react-router';
import { routerReducer, routerMiddleware } from 'react-router-redux'; import { routerReducer, routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import { reducer as formReducer } from 'redux-form'; import { reducer as formReducer } from 'redux-form';
import DevTools from '../components/DevTools.js';
import controlAppReducer from '../reducers/ControlAppReducer.js'; import controlAppReducer from '../reducers/ControlAppReducer.js';
const reduxRouterMiddleware = routerMiddleware(browserHistory); const reduxRouterMiddleware = routerMiddleware(browserHistory);
const enhancer = compose(
applyMiddleware(
reduxRouterMiddleware,
thunk
),
// Only include DevTools in development mode
DEVELOPMENT ? DevTools.instrument() : x => x,
);
export default function controlStore() { export default function controlStore() {
return createStore( return createStore(
combineReducers({ combineReducers({
@ -24,9 +35,6 @@ export default function controlStore() {
notifications: [], notifications: [],
}, },
}, },
applyMiddleware( enhancer,
reduxRouterMiddleware,
thunk
)
); );
} }

Просмотреть файл

@ -163,3 +163,12 @@ To add a new action:
To update an existing action, follow steps 4 and 5 above after making your To update an existing action, follow steps 4 and 5 above after making your
changes. changes.
Redux DevTools
--------------
The control interface includes the `Redux DevTools`_ in development mode to help
debug issues. To toggle the DevTools, hit ``Ctrl-H``. You can change the side of
the screen the tools are docked on using ``Ctrl-Q``, and can resize the tools by
dragging the edge of the bar.
.. _Redux DevTools: https://github.com/gaearon/redux-devtools

Просмотреть файл

@ -1,6 +1,8 @@
/* eslint-env node */ /* eslint-env node */
/* eslint-disable no-var, func-names, prefer-arrow-callback, prefer-template */ /* eslint-disable no-var, func-names, prefer-arrow-callback, prefer-template */
// Karma configuration // Karma configuration
const WEBPACK_CONFIG = require('./webpack.config.js');
module.exports = function (config) { module.exports = function (config) {
var karmaConfig = { var karmaConfig = {
// base path that will be used to resolve all patterns (eg. files, exclude) // base path that will be used to resolve all patterns (eg. files, exclude)
@ -28,22 +30,9 @@ module.exports = function (config) {
'client/actions/tests/index.js': ['webpack', 'sourcemap'], 'client/actions/tests/index.js': ['webpack', 'sourcemap'],
}, },
webpack: { // The first config is for the control interface. It is only coincidence
module: { // that this config works for the action code/tests as well.
loaders: [ webpack: WEBPACK_CONFIG[0],
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
},
{
test: /(\.|\/)(json)$/,
loader: 'json',
},
],
},
devtool: 'inline-source-map',
},
webpackServer: { webpackServer: {
quiet: true, // Suppress *all* webpack messages, including errors quiet: true, // Suppress *all* webpack messages, including errors

Просмотреть файл

@ -20,7 +20,6 @@
"classnames": "2.2.5", "classnames": "2.2.5",
"cssmin": "0.4.3", "cssmin": "0.4.3",
"font-awesome": "4.6.3", "font-awesome": "4.6.3",
"isomorphic-fetch": "2.2.1",
"jexl": "1.1.4", "jexl": "1.1.4",
"jquery": "3.1.0", "jquery": "3.1.0",
"json-editor": "0.7.28", "json-editor": "0.7.28",
@ -78,6 +77,9 @@
"postcss-loader": "0.11.1", "postcss-loader": "0.11.1",
"react-addons-test-utils": "15.2.1", "react-addons-test-utils": "15.2.1",
"react-tools": "0.13.3", "react-tools": "0.13.3",
"redux-devtools": "^3.3.1",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"redux-mock-store": "1.1.4", "redux-mock-store": "1.1.4",
"sass-loader": "4.0.1", "sass-loader": "4.0.1",
"style-loader": "0.13.1", "style-loader": "0.13.1",

Просмотреть файл

@ -15,9 +15,6 @@ var plugins = [
new BundleTracker({ filename: './webpack-stats.json' }), new BundleTracker({ filename: './webpack-stats.json' }),
new webpack.optimize.OccurrenceOrderPlugin(true), new webpack.optimize.OccurrenceOrderPlugin(true),
new ExtractTextPlugin('[name]-[hash].css'), new ExtractTextPlugin('[name]-[hash].css'),
new webpack.ProvidePlugin({
fetch: 'exports?self.fetch!isomorphic-fetch',
}),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
PRODUCTION: production, PRODUCTION: production,
DEVELOPMENT: !production, DEVELOPMENT: !production,
@ -47,6 +44,7 @@ if (production) {
module.exports = [ module.exports = [
{ {
context: __dirname, context: __dirname,
devtool: production ? undefined : 'eval-source-map',
entry: { entry: {
selfrepair: [ selfrepair: [
@ -66,6 +64,11 @@ module.exports = [
filename: '[name]-[hash].js', filename: '[name]-[hash].js',
chunkFilename: '[id].bundle.js', chunkFilename: '[id].bundle.js',
}, },
externals: {
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
'react/addons': true,
},
plugins, plugins,
@ -76,6 +79,10 @@ module.exports = [
exclude: /node_modules/, exclude: /node_modules/,
loader: 'babel', loader: 'babel',
}, },
{
test: /\.json$/,
loader: 'json-loader',
},
{ {
test: /\.scss$/, test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass?sourceMap'), loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass?sourceMap'),