diff --git a/examples/counter/package.json b/examples/counter/package.json index 78ff31ba..3c7d14a0 100644 --- a/examples/counter/package.json +++ b/examples/counter/package.json @@ -29,7 +29,7 @@ "react-hot-loader": "^1.3.0", "redux-devtools": "^3.0.0-beta-2", "redux-devtools-log-monitor": "^1.0.0-beta-2", - "redux-devtools-dock-monitor": "^1.0.0-beta-1", + "redux-devtools-dock-monitor": "^1.0.0-beta-2", "webpack": "^1.9.11", "webpack-dev-server": "^1.9.0" } diff --git a/examples/counter/src/store/configureStore.js b/examples/counter/src/store/configureStore.js index 4a4437c2..78c9ea1f 100644 --- a/examples/counter/src/store/configureStore.js +++ b/examples/counter/src/store/configureStore.js @@ -1,4 +1,4 @@ -if (process.env.NODE_ENV === 'development') { +if (process.env.NODE_ENV === 'production') { module.exports = require('./configureStore.prod'); } else { module.exports = require('./configureStore.dev'); diff --git a/examples/todomvc/README.md b/examples/todomvc/README.md index da2a8208..0f00054e 100644 --- a/examples/todomvc/README.md +++ b/examples/todomvc/README.md @@ -1,6 +1,14 @@ # Redux DevTools TodoMVC example -## Getting Started +## Running example -1. Install dependencies: `npm i` -2. Start the development server: `npm start` +``` +git clone https://github.com/gaearon/redux-devtools.git +cd redux-devtools +npm install + +cd examples/todomvc +npm install +npm start +open http://localhost:3000 +``` diff --git a/examples/todomvc/containers/App.js b/examples/todomvc/containers/App.js deleted file mode 100644 index f2166ea7..00000000 --- a/examples/todomvc/containers/App.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { Component } from 'react'; -import TodoApp from './TodoApp'; -import { createStore, combineReducers, compose } from 'redux'; -import { devTools, persistState } from 'redux-devtools'; -import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react'; -import { Provider } from 'react-redux'; -import * as reducers from '../reducers'; - -const finalCreateStore = compose( - devTools(), - persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)) -)(createStore); - -const reducer = combineReducers(reducers); -const store = finalCreateStore(reducer); - -if (module.hot) { - module.hot.accept('../reducers', () => - store.replaceReducer(combineReducers(require('../reducers'))) - ); -} - -export default class App extends Component { - render() { - return ( -
- - {() => } - - - - -
- ); - } -} diff --git a/examples/todomvc/containers/DevTools.js b/examples/todomvc/containers/DevTools.js new file mode 100644 index 00000000..70fd5bf4 --- /dev/null +++ b/examples/todomvc/containers/DevTools.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { createDevTools } from 'redux-devtools'; +import LogMonitor from 'redux-devtools-log-monitor'; +import DockMonitor from 'redux-devtools-dock-monitor'; + +export default createDevTools( + + + +); diff --git a/examples/todomvc/containers/Root.dev.js b/examples/todomvc/containers/Root.dev.js new file mode 100644 index 00000000..43f6626e --- /dev/null +++ b/examples/todomvc/containers/Root.dev.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react'; +import { Provider } from 'react-redux'; +import TodoApp from './TodoApp'; +import DevTools from './DevTools'; + +export default class Root extends Component { + render() { + const { store } = this.props; + return ( + +
+ + +
+
+ ); + } +} diff --git a/examples/todomvc/containers/Root.js b/examples/todomvc/containers/Root.js new file mode 100644 index 00000000..9cea0b22 --- /dev/null +++ b/examples/todomvc/containers/Root.js @@ -0,0 +1,5 @@ +if (process.env.NODE_ENV === 'production') { + module.exports = require('./Root.prod'); +} else { + module.exports = require('./Root.dev'); +} diff --git a/examples/todomvc/containers/Root.prod.js b/examples/todomvc/containers/Root.prod.js new file mode 100644 index 00000000..7a29a4fe --- /dev/null +++ b/examples/todomvc/containers/Root.prod.js @@ -0,0 +1,14 @@ +import React, { Component } from 'react'; +import { Provider } from 'react-redux'; +import TodoApp from './TodoApp'; + +export default class Root extends Component { + render() { + const { store } = this.props; + return ( + + + + ); + } +} diff --git a/examples/todomvc/index.js b/examples/todomvc/index.js index 3da96f62..9ed89148 100644 --- a/examples/todomvc/index.js +++ b/examples/todomvc/index.js @@ -1,8 +1,12 @@ -import React from 'react'; -import App from './containers/App'; import 'todomvc-app-css/index.css'; +import React from 'react'; +import { render } from 'react-dom'; +import configureStore from './store/configureStore'; +import Root from './containers/Root'; -React.render( - , +const store = configureStore(); + +render( + , document.getElementById('root') ); diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json index 0edba6b0..991a452b 100644 --- a/examples/todomvc/package.json +++ b/examples/todomvc/package.json @@ -29,8 +29,9 @@ "homepage": "https://github.com/gaearon/redux-devtools#readme", "dependencies": { "classnames": "^2.1.2", - "react": "^0.13.3", - "react-redux": "^3.0.0", + "react": "^0.14.0", + "react-dom": "^0.14.0", + "react-redux": "^4.0.0", "redux": "^3.0.0" }, "devDependencies": { @@ -39,6 +40,9 @@ "node-libs-browser": "^0.5.2", "raw-loader": "^0.5.1", "react-hot-loader": "^1.3.0", + "redux-devtools": "^3.0.0-beta-2", + "redux-devtools-log-monitor": "^1.0.0-beta-2", + "redux-devtools-dock-monitor": "^1.0.0-beta-2", "style-loader": "^0.12.3", "todomvc-app-css": "^2.0.1", "webpack": "^1.9.11", diff --git a/examples/todomvc/reducers/index.js b/examples/todomvc/reducers/index.js index b340db27..f4aad188 100644 --- a/examples/todomvc/reducers/index.js +++ b/examples/todomvc/reducers/index.js @@ -1 +1,8 @@ -export { default as todos } from './todos'; +import { combineReducers } from 'redux'; +import todos from './todos'; + +const rootReducer = combineReducers({ + todos +}); + +export default rootReducer; diff --git a/examples/todomvc/store/configureStore.dev.js b/examples/todomvc/store/configureStore.dev.js new file mode 100644 index 00000000..af1540ce --- /dev/null +++ b/examples/todomvc/store/configureStore.dev.js @@ -0,0 +1,25 @@ +import { createStore, compose } from 'redux'; +import { persistState } from 'redux-devtools'; +import rootReducer from '../reducers'; +import DevTools from '../containers/DevTools'; + +const finalCreateStore = compose( + DevTools.instrument(), + persistState( + window.location.href.match( + /[?&]debug_session=([^&]+)\b/ + ) + ) +)(createStore); + +export default function configureStore(initialState) { + const store = finalCreateStore(rootReducer, initialState); + + if (module.hot) { + module.hot.accept('../reducers', () => + store.replaceReducer(require('../reducers')) + ); + } + + return store; +} diff --git a/examples/todomvc/store/configureStore.js b/examples/todomvc/store/configureStore.js new file mode 100644 index 00000000..78c9ea1f --- /dev/null +++ b/examples/todomvc/store/configureStore.js @@ -0,0 +1,5 @@ +if (process.env.NODE_ENV === 'production') { + module.exports = require('./configureStore.prod'); +} else { + module.exports = require('./configureStore.dev'); +} diff --git a/examples/todomvc/store/configureStore.prod.js b/examples/todomvc/store/configureStore.prod.js new file mode 100644 index 00000000..2872f85a --- /dev/null +++ b/examples/todomvc/store/configureStore.prod.js @@ -0,0 +1,6 @@ +import { createStore } from 'redux'; +import rootReducer from '../reducers'; + +export default function configureStore(initialState) { + return createStore(rootReducer, initialState); +}