update counter example to use react-redux v0.5.1

examples/counter/components/Counter.js

@@ -1,9 +1,12 @@
 import React, { Component, PropTypes } from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as CounterActions from '../actions/CounterActions';
 
-class Counter extends Component {
+export class CounterComponent extends Component {
 
   render() {
-    const { increment, incrementIfOdd, incrementAsync, decrement, counter } = this.props;
+    const { actions: { increment, incrementIfOdd, incrementAsync, decrement }, counter } = this.props;
     return (
       <p>
         Clicked: {counter} times
@@ -20,12 +23,26 @@ class Counter extends Component {
   }
 }
 
-Counter.propTypes = {
-  increment: PropTypes.func.isRequired,
-  incrementIfOdd: PropTypes.func.isRequired,
-  incrementAsync: PropTypes.func.isRequired,
-  decrement: PropTypes.func.isRequired,
+CounterComponent.propTypes = {
+  actions: PropTypes.shape({
+    increment: PropTypes.func.isRequired,
+    incrementIfOdd: PropTypes.func.isRequired,
+    incrementAsync: PropTypes.func.isRequired,
+    decrement: PropTypes.func.isRequired
+  }),
   counter: PropTypes.number.isRequired
 };
 
-export default Counter;
+function mapStateToProps(state) {
+  return {
+    counter: state.counter
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(CounterActions, dispatch)
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);

examples/counter/containers/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
-import CounterApp from './CounterApp';
+import Counter from '../components/Counter';
 import createCounterStore from '../store/createCounterStore';
 
 const store = createCounterStore();
@@ -9,7 +9,7 @@ export default class App extends Component {
   render() {
     return (
       <Provider store={store}>
-        {() => <CounterApp />}
+        {() => <Counter />}
       </Provider>
     );
   }

examples/counter/package.json

@@ -29,7 +29,7 @@
   "homepage": "https://github.com/gaearon/redux#readme",
   "dependencies": {
     "react": "^0.13.3",
-    "react-redux": "^0.4.0",
+    "react-redux": "^0.5.1",
     "redux": "^1.0.0-rc",
     "redux-thunk": "^0.1.0"
   },

examples/counter/test/components/Counter.spec.js

@@ -1,7 +1,7 @@
 import expect from 'expect';
 import jsdomReact from '../jsdomReact';
 import React from 'react/addons';
-import Counter from '../../components/Counter';
+import { CounterComponent as Counter } from '../../components/Counter';
 
 const { TestUtils } = React.addons;
 
@@ -12,7 +12,7 @@ function setup() {
     incrementAsync: expect.createSpy(),
     decrement: expect.createSpy()
   };
-  const component = TestUtils.renderIntoDocument(<Counter counter={1} {...actions} />);
+  const component = TestUtils.renderIntoDocument(<Counter counter={1} actions={actions} />);
   return {
     component: component,
     actions: actions,

examples/counter/test/containers/CounterApp.spec.js → examples/counter/test/containers/App.spec.js

@@ -2,7 +2,7 @@ import expect from 'expect';
 import jsdomReact from '../jsdomReact';
 import React from 'react/addons';
 import { Provider } from 'react-redux';
-import CounterApp from '../../containers/CounterApp';
+import Counter from '../../components/Counter';
 import createCounterStore from '../../store/createCounterStore';
 
 const { TestUtils } = React.addons;
@@ -11,7 +11,7 @@ function setup(initialState) {
   const store = createCounterStore(initialState);
   const app = TestUtils.renderIntoDocument(
     <Provider store={store}>
-      {() => <CounterApp />}
+      {() => <Counter />}
     </Provider>
   );
   return {