Simplify counter example

Author: gaearon

examples/counter/actions/counter.js

@@ -1,30 +1,52 @@
 import React, { Component, PropTypes } from 'react'
 
 class Counter extends Component {
+  constructor(props) {
+    super(props)
+    this.incrementAsync = this.incrementAsync.bind(this)
+    this.incrementIfOdd = this.incrementIfOdd.bind(this)
+  }
+
+  incrementIfOdd() {
+    if (this.props.value % 2 === 1) {
+      this.props.onIncrement()
+    }
+  }
+
+  incrementAsync() {
+    setTimeout(this.props.onIncrement, 1000)
+  }
+
   render() {
-    const { increment, incrementIfOdd, incrementAsync, decrement, counter } = this.props
+    const { value, onIncrement, onDecrement } = this.props
     return (
       <p>
-        Clicked: {counter} times
+        Clicked: {value} times
         {' '}
-        <button onClick={increment}>+</button>
+        <button onClick={onIncrement}>
+          +
+        </button>
         {' '}
-        <button onClick={decrement}>-</button>
+        <button onClick={onDecrement}>
+          -
+        </button>
         {' '}
-        <button onClick={incrementIfOdd}>Increment if odd</button>
+        <button onClick={this.incrementIfOdd}>
+          Increment if odd
+        </button>
         {' '}
-        <button onClick={() => incrementAsync()}>Increment async</button>
+        <button onClick={this.incrementAsync}>
+          Increment async
+        </button>
       </p>
     )
   }
 }
 
 Counter.propTypes = {
-  increment: PropTypes.func.isRequired,
-  incrementIfOdd: PropTypes.func.isRequired,
-  incrementAsync: PropTypes.func.isRequired,
-  decrement: PropTypes.func.isRequired,
-  counter: PropTypes.number.isRequired
+  value: PropTypes.number.isRequired,
+  onIncrement: PropTypes.func.isRequired,
+  onDecrement: PropTypes.func.isRequired
 }
 
 export default Counter

examples/counter/components/Counter.js

@@ -1,14 +1,22 @@
 import React from 'react'
-import { render } from 'react-dom'
-import { Provider } from 'react-redux'
-import App from './containers/App'
-import configureStore from './store/configureStore'
+import ReactDOM from 'react-dom'
+import { createStore } from 'redux'
+import Counter from './components/Counter'
+import counter from './reducers'
 
-const store = configureStore()
+const store = createStore(counter)
+const rootEl = document.getElementById('root')
 
-render(
-  <Provider store={store}>
-    <App />
-  </Provider>,
-  document.getElementById('root')
-)
+function render() {
+  ReactDOM.render(
+    <Counter
+      value={store.getState()}
+      onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
+      onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
+    />,
+    rootEl  
+  )
+}
+
+render()
+store.subscribe(render)

examples/counter/containers/App.js

@@ -19,9 +19,7 @@
   "dependencies": {
     "react": "^0.14.6",
     "react-dom": "^0.14.6",
-    "react-redux": "^4.0.6",
-    "redux": "^3.0.6",
-    "redux-thunk": "^1.0.3"
+    "redux": "^3.0.6"
   },
   "devDependencies": {
     "babel-core": "^5.6.18",

examples/counter/index.js

@@ -1,8 +1,10 @@
-import { combineReducers } from 'redux'
-import counter from './counter'
-
-const rootReducer = combineReducers({
-  counter
-})
-
-export default rootReducer
+export default function counter(state = 0, action) {
+  switch (action.type) {
+    case 'INCREMENT':
+      return state + 1
+    case 'DECREMENT':
+      return state - 1
+    default:
+      return state
+  }
+}

examples/counter/package.json

@@ -3,14 +3,14 @@ import React from 'react'
 import TestUtils from 'react-addons-test-utils'
 import Counter from '../../components/Counter'
 
-function setup() {
+function setup(value = 0) {
   const actions = {
-    increment: expect.createSpy(),
-    incrementIfOdd: expect.createSpy(),
-    incrementAsync: expect.createSpy(),
-    decrement: expect.createSpy()
+    onIncrement: expect.createSpy(),
+    onDecrement: expect.createSpy()
   }
-  const component = TestUtils.renderIntoDocument(<Counter counter={1} {...actions} />)
+  const component = TestUtils.renderIntoDocument(
+    <Counter value={value} {...actions} />
+  )
   return {
     component: component,
     actions: actions,
@@ -22,30 +22,39 @@ function setup() {
 describe('Counter component', () => {
   it('should display count', () => {
     const { p } = setup()
-    expect(p.textContent).toMatch(/^Clicked: 1 times/)
+    expect(p.textContent).toMatch(/^Clicked: 0 times/)
   })
 
-  it('first button should call increment', () => {
+  it('first button should call onIncrement', () => {
     const { buttons, actions } = setup()
     TestUtils.Simulate.click(buttons[0])
-    expect(actions.increment).toHaveBeenCalled()
+    expect(actions.onIncrement).toHaveBeenCalled()
   })
 
-  it('second button should call decrement', () => {
+  it('second button should call onDecrement', () => {
     const { buttons, actions } = setup()
     TestUtils.Simulate.click(buttons[1])
-    expect(actions.decrement).toHaveBeenCalled()
+    expect(actions.onDecrement).toHaveBeenCalled()
   })
 
-  it('third button should call incrementIfOdd', () => {
-    const { buttons, actions } = setup()
+  it('third button should not call onIncrement if the counter is even', () => {
+    const { buttons, actions } = setup(42)
+    TestUtils.Simulate.click(buttons[2])
+    expect(actions.onIncrement).toNotHaveBeenCalled()
+  })
+
+  it('third button should call onIncrement if the counter is odd', () => {
+    const { buttons, actions } = setup(43)
     TestUtils.Simulate.click(buttons[2])
-    expect(actions.incrementIfOdd).toHaveBeenCalled()
+    expect(actions.onIncrement).toHaveBeenCalled()
   })
 
-  it('fourth button should call incrementAsync', () => {
+  it('fourth button should call onIncrement in a second', (done) => {
     const { buttons, actions } = setup()
     TestUtils.Simulate.click(buttons[3])
-    expect(actions.incrementAsync).toHaveBeenCalled()
+    setTimeout(() => {
+      expect(actions.onIncrement).toHaveBeenCalled()
+      done()
+    }, 1000)
   })
 })