fix: support redux 3.0.0

sergey-lapin · Oct 2, 2015 · bba8291 · bba8291
1 parent 5c8d03d
commit bba8291
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 69 deletions.
diff --git a/examples/todomvc/actions/TodoActions.js → examples/todomvc/actions/todos.js b/examples/todomvc/actions/TodoActions.js → examples/todomvc/actions/todos.js
diff --git a/examples/todomvc/containers/App.js b/examples/todomvc/containers/App.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Content, TestMonitor} from '../../../src';
+import {Content, TestMonitor} from '../../../lib';
 import TodoApp from './TodoApp';
 import { createStore, combineReducers, compose } from 'redux';
 import { devTools, persistState } from 'redux-devtools';
@@ -9,9 +9,8 @@ import * as reducers from '../reducers';
 
 const finalCreateStore = compose(
   devTools(),
-  persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
-  createStore
-);
+  persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
+)(createStore);
 
 const reducer = combineReducers(reducers);
 const store = finalCreateStore(reducer);
@@ -28,10 +27,12 @@ export default class App extends Component {
                     monitor={LogMonitor} />
         </DebugPanel>
         <DebugPanel top left bottom>
-          <DevTools store={store}
-                    monitor={TestMonitor}/>
+        <DevTools store={store}
+                  monitor={TestMonitor}/>
         </DebugPanel>
       </div>
     );
   }
 }
+
+
diff --git a/examples/todomvc/containers/TodoApp.js b/examples/todomvc/containers/TodoApp.js
@@ -1,21 +1,15 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
-import { Connector } from 'react-redux';
+import { connect } from 'react-redux';
 import Header from '../components/Header';
 import MainSection from '../components/MainSection';
-import * as TodoActions from '../actions/TodoActions';
+import * as TodoActions from '../actions/todos';
 
-export default class TodoApp extends Component {
+class App extends Component {
   render() {
-    return (
-      <Connector select={state => ({ todos: state.todos })}>
-        {this.renderChild}
-      </Connector>
-    );
-  }
-
-  renderChild({ todos, dispatch }) {
+    const { todos, dispatch } = this.props;
     const actions = bindActionCreators(TodoActions, dispatch);
+
     return (
       <div>
         <Header addTodo={actions.addTodo} />
@@ -24,3 +18,16 @@ export default class TodoApp extends Component {
     );
   }
 }
+
+App.propTypes = {
+  todos: PropTypes.array.isRequired,
+  dispatch: PropTypes.func.isRequired
+};
+
+function mapStateToProps(state) {
+  return {
+    todos: state.todos
+  };
+}
+
+export default connect(mapStateToProps)(App);
diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json
@@ -34,14 +34,15 @@
     "react-redux": "^3.0.1"
   },
   "devDependencies": {
+    "babel": "^5.8.23",
     "babel-core": "^5.6.18",
     "babel-loader": "^5.1.4",
     "chai": "^3.0.0",
     "mocha": "^2.2.5",
     "node-libs-browser": "^0.5.2",
     "raw-loader": "^0.5.1",
     "react-hot-loader": "^1.2.7",
-    "redux-devtools": "^0.1.1",
+    "redux-devtools": "^2.1.5",
     "style-loader": "^0.12.3",
     "todomvc-app-css": "^2.0.1",
     "webpack": "^1.9.11",

diff --git a/src/components/Content.js b/src/components/Content.js
@@ -1,7 +1,13 @@
 import React, { Component } from 'react';
 
 export default class Content extends Component {
-    render() {
-        return <div style={{marginLeft:'20%', maxWidth:'80%', paddingLeft:'2em', paddingRight:'6em'}}>{this.props.children}</div>;
-    }
+  render() {
+    return <div
+      style={{
+      marginLeft:'20%',
+      maxWidth:'80%',
+      paddingLeft:'2em',
+      paddingRight:'6em'
+    }}>{this.props.children}</div>;
+  }
 }
diff --git a/src/components/TestMonitor.js b/src/components/TestMonitor.js
@@ -6,55 +6,68 @@ import PureComponent from 'react-pure-render/component';
 import R from 'ramda';
 
 export default class TestMonitor extends PureComponent {
-    constructor() {
-        super();
-        this.state = {
-            describeText: ''
-        }
+  constructor() {
+    super();
+    this.state = {
+      describeText: ''
     }
+  }
 
-    onDescribeNewText(text) {
-        this.setState({describeText: text})
-    }
+  onDescribeNewText(text) {
+    this.setState({describeText: text})
+  }
+
+  render() {
+    const { stagedActions, computedStates }= this.props;
 
-    render() {
-        const { stagedActions, computedStates }= this.props;
-
-        const countOfActionsAndStores = R.range(0, stagedActions.length);
-
-        const items = R.map((index)=> {
-                if (index === 0) {
-                    return {
-                        action: {
-                            type: '@@INIT'
-                        },
-                        curState: {},
-                        nextState: computedStates[0].state,
-                        index: index
-                    }
-                }
-
-                return {
-                    index: index,
-                    action: stagedActions[index],
-                    curState: computedStates[index - 1].state,
-                    nextState: computedStates[index].state
-                }
+    const countOfActionsAndStores = R.range(0, stagedActions.length);
+
+    const items = R.map((index)=> {
+        if (index === 0) {
+          return {
+            action: {
+              type: '@@INIT'
             },
-            countOfActionsAndStores);
-
-        return (
-            <div>
-                <Describe onNewText={this.onDescribeNewText.bind(this)} items={items}/>
-                <br/>
-
-                <div>
-                    <p>Click the button to copy some text</p>
-                    <ReactZeroClipboard text={this.state.describeText}>
-                        <button style={{ textDecoration: 'underline', cursor: 'hand' }}>Copy to Buffer</button>
-                    </ReactZeroClipboard>
-                </div>
-            </div>
-        );
-    }
+            curState: {},
+            nextState: computedStates[0].state,
+            index: index
+          }
+        }
+
+        return {
+          index: index,
+          action: stagedActions[index],
+          curState: computedStates[index - 1].state,
+          nextState: computedStates[index].state
+        }
+      },
+      countOfActionsAndStores);
+
+    return (
+      <div style={{
+    position: 'relative',
+    overflowY: 'hidden',
+    width: '100%',
+    height: '100%',
+    minWidth: 300,
+    backgroundColor: '#2A2F3A'}}>
+        <div style={{position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflowX: 'hidden',
+    overflowY: 'auto'}}>
+          <Describe onNewText={this.onDescribeNewText.bind(this)} items={items}/>
+          <br/>
+
+          <div>
+            <p>Click the button to copy some text</p>
+            <ReactZeroClipboard text={this.state.describeText}>
+              <button style={{ textDecoration: 'underline', cursor: 'hand' }}>Copy to Buffer</button>
+            </ReactZeroClipboard>
+          </div>
+        </div>
+      </div>
+    );
+  }
 }