Skip to content

Commit ba15c01

Browse files
calvinlcalvinl
committed
Merge pull request #2 from combine/feature/devtools
add support for redux DevTools
2 parents 4221222 + 7955b9f commit ba15c01

File tree

14 files changed

+181
-118
lines changed

14 files changed

+181
-118
lines changed

‎client/index.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,7 @@ const rootElement = document.getElementById('app');
2727
// rendering.
2828
const history = __CORDOVA__ ? hashHistory : browserHistory;
2929
const initialState = window.__INITIAL_STATE__;
30-
const store = configureStore(initialState, {
31-
history: history,
32-
dispatchRouteChanges: true,
33-
rootElement: rootElement
34-
});
30+
const store = configureStore(initialState, history);
3531

3632
/* FastClick
3733
* Disables the 300ms delay for mobile apps. Comment out or add a conditional

‎common/config/store.dev.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { compose, createStore, applyMiddleware } from 'redux';
2+
import thunk from 'redux-thunk';
3+
import rootReducer from '../reducers';
4+
import persistState from 'redux-localstorage';
5+
import { syncHistory } from 'react-router-redux';
6+
import DevTools from '../shared/containers/DevTools';
7+
8+
/* localStorage Persisted States
9+
* Set up persisted state properties via localStorage. They should be added
10+
* by their property name of the piece of state you want to persist, e.g:
11+
* const persistedStates = ['session', 'order'];
12+
*/
13+
const persistedStates = [];
14+
15+
export default function configureStore(initialState, history = null) {
16+
/* Middleware
17+
* Configure this array with the middleware that you want included. thunk
18+
* is included by default, and react-router-redux's syncHistory is also
19+
* applied if an `options.history` object was passed to configureStore.
20+
*/
21+
let middleware = [thunk];
22+
23+
// Add universal enhancers here
24+
let enhancers = [
25+
DevTools.instrument()
26+
];
27+
28+
// Client-side enhancers and middleware
29+
if (isBrowser()) {
30+
enhancers.push(persistState(persistedStates));
31+
if (history) {
32+
middleware.push(syncHistory(history));
33+
}
34+
}
35+
36+
const enhancer = compose(...[
37+
applyMiddleware(...middleware),
38+
...enhancers
39+
]);
40+
41+
// create store with enhancers, middleware, reducers, and initialState
42+
const store = createStore(rootReducer, initialState, enhancer);
43+
44+
if (module.hot) {
45+
// Enable Webpack hot module replacement for reducers
46+
module.hot.accept('../reducers', () => {
47+
const nextRootReducer = require('../reducers').default;
48+
store.replaceReducer(nextRootReducer);
49+
});
50+
}
51+
52+
return store;
53+
}
54+
55+
function isBrowser() {
56+
return (typeof window !== 'undefined' && typeof window.document !== 'undefined');
57+
}

‎common/config/store.js‎

Lines changed: 4 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,5 @@
1-
import { compose, createStore, applyMiddleware } from 'redux';
2-
import thunk from 'redux-thunk';
3-
import rootReducer from '../reducers';
4-
import persistState from 'redux-localstorage';
5-
import { syncHistory } from 'react-router-redux';
6-
7-
export default function configureStore(initialState, options = {}) {
8-
const opts = Object.assign({}, {
9-
history: null,
10-
dispatchRouteChanges: false
11-
}, options);
12-
13-
14-
/* localStorage Persisted States
15-
* Set up persisted state properties via localStorage. They should be added
16-
* by their property name of the piece of state you want to persist, e.g:
17-
* const persistedStates = ['session', 'order'];
18-
*/
19-
const persistedStates = [];
20-
21-
/* Middleware
22-
* Configure this array with the middleware that you want included. thunk
23-
* is included by default, and react-router-redux's syncHistory is also
24-
* applied if an `options.history` object was passed to configureStore.
25-
*/
26-
const middleware = [
27-
// add more middlware here
28-
thunk
29-
].concat(
30-
opts.history ? [syncHistory(opts.history)] : []
31-
);
32-
33-
// Create an a composed method which enhances redux's createStore with
34-
// additional functionality
35-
let enhancers = [
36-
// Universal enhancers (both server and client-side)
37-
applyMiddleware.apply(this, middleware)
38-
39-
].concat(isBrowser() ? [
40-
// Add browser/client-side only enhancers here
41-
// e.g. localStorage, geolocation, etc.
42-
persistState(persistedStates)
43-
44-
] : [
45-
// Add server-side only enhancers here
46-
47-
]);
48-
49-
let enhanced = compose.apply(this, enhancers);
50-
51-
// create store with enhancers, middleware, reducers, and initialState
52-
const store = enhanced(createStore)(rootReducer, initialState);
53-
54-
if (module.hot) {
55-
// Enable Webpack hot module replacement for reducers
56-
module.hot.accept('../reducers', () => {
57-
const nextRootReducer = require('../reducers').default;
58-
store.replaceReducer(nextRootReducer);
59-
});
60-
}
61-
62-
return store;
63-
}
64-
65-
function isBrowser() {
66-
return (typeof window !== 'undefined' && typeof window.document !== 'undefined');
1+
if (process.env.NODE_ENV === 'production') {
2+
module.exports = require('./store.prod');
3+
} else {
4+
module.exports = require('./store.dev');
675
}

‎common/config/store.prod.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { compose, createStore, applyMiddleware } from 'redux';
2+
import thunk from 'redux-thunk';
3+
import rootReducer from '../reducers';
4+
import persistState from 'redux-localstorage';
5+
import { syncHistory } from 'react-router-redux';
6+
7+
/* localStorage Persisted States
8+
* Set up persisted state properties via localStorage. They should be added
9+
* by their property name of the piece of state you want to persist, e.g:
10+
* const persistedStates = ['session', 'order'];
11+
*/
12+
const persistedStates = [];
13+
14+
export default function configureStore(initialState, history = null) {
15+
/* Middleware
16+
* Configure this array with the middleware that you want included. thunk
17+
* is included by default, and react-router-redux's syncHistory is also
18+
* applied if an `options.history` object was passed to configureStore.
19+
*/
20+
let middleware = [thunk];
21+
22+
// Add universal enhancers here
23+
let enhancers = [];
24+
25+
// Client-side enhancers and middleware
26+
if (isBrowser()) {
27+
enhancers.push(persistState(persistedStates));
28+
if (history) {
29+
middleware.push(syncHistory(history));
30+
}
31+
}
32+
33+
const enhancer = compose(...[
34+
applyMiddleware(...middleware),
35+
...enhancers
36+
]);
37+
38+
// create store with enhancers, middleware, reducers, and initialState
39+
const store = createStore(rootReducer, initialState, enhancer);
40+
41+
return store;
42+
}
43+
44+
function isBrowser() {
45+
return (typeof window !== 'undefined' && typeof window.document !== 'undefined');
46+
}

‎common/routes/app/containers/App.dev.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { Component } from 'react';
2+
import Header from '../components/Header';
3+
import Footer from '../components/Footer';
4+
import DevTools from '../../../shared/containers/DevTools';
5+
6+
export default class App extends Component {
7+
render() {
8+
const { header, footer } = this.props;
9+
return (
10+
<div>
11+
{header || <Header />}
12+
{this.props.children}
13+
{footer || <Footer />}
14+
<DevTools />
15+
</div>
16+
);
17+
}
18+
}

‎common/routes/app/containers/App.js‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,5 @@
1-
import React, { Component } from 'react';
2-
import Header from '../components/Header';
3-
import Footer from '../components/Footer';
4-
5-
export default class App extends Component {
6-
render() {
7-
const { header, footer } = this.props;
8-
return (
9-
<div>
10-
{header || <Header />}
11-
{this.props.children}
12-
{footer || <Footer />}
13-
</div>
14-
);
15-
}
1+
if (process.env.NODE_ENV === 'production') {
2+
module.exports = require('./App.prod');
3+
} else {
4+
module.exports = require('./App.dev');
165
}

‎common/routes/app/containers/App.prod.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { Component } from 'react';
2+
import Header from '../components/Header';
3+
import Footer from '../components/Footer';
4+
5+
export default class App extends Component {
6+
render() {
7+
const { header, footer } = this.props;
8+
return (
9+
<div>
10+
{header || <Header />}
11+
{this.props.children}
12+
{footer || <Footer />}
13+
</div>
14+
);
15+
}
16+
}

‎common/shared/containers/DevTools.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
3+
// Exported from redux-devtools
4+
import { createDevTools } from 'redux-devtools';
5+
6+
// Monitors are separate packages, and you can make a custom one
7+
import LogMonitor from 'redux-devtools-log-monitor';
8+
import DockMonitor from 'redux-devtools-dock-monitor';
9+
10+
// createDevTools takes a monitor and produces a DevTools component
11+
const DevTools = createDevTools(
12+
// Monitors are individually adjustable with props.
13+
// Consult their repositories to learn about those props.
14+
// Here, we put LogMonitor inside a DockMonitor.
15+
<DockMonitor toggleVisibilityKey="ctrl-h"
16+
changePositionKey="ctrl-q">
17+
<LogMonitor theme="tomorrow" />
18+
</DockMonitor>
19+
);
20+
21+
export default DevTools;

‎common/templates/server.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link type="text/css" rel="stylesheet" href="<%= stylesheet %>" />
99
</head>
1010
<body>
11-
<div id="app" class="<%= appClass %>"><%= html %></div>
11+
<div id="app"><%= html %></div>
1212
<script>window.__INITIAL_STATE__ = <%= JSON.stringify(initialState) %>;</script>
1313
<script src="<%= bundleJs %>"></script>
1414
</body>

‎common/util/index.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)