Improve with-redux example (#4377)

It's better that Counter behave not only `increment (add)` but also `decrement` or `reset`.

* Add decrement, reset handlers and rename add handler in `components/counter.js`
* Add increment, decrement, reset actions to `store.js`
* Rename page component class name: Counter => Index in `pages/index.js`
* Remove needless dispatch count event on getInitialProps in `pages/index.js`
* Format JSX to be readable in `pages/_app.js`
* Remove needless line from `components/examples.js`
* Remove needless spaces in `lib/with-redux-store.js`

examples/with-redux/components/counter.js

@@ -1,19 +1,31 @@
 import React, {Component} from 'react'
 import { connect } from 'react-redux'
-import { addCount } from '../store'
+import { incrementCount, decrementCount, resetCount } from '../store'
 
-class AddCount extends Component {
-  add = () => {
+class Counter extends Component {
+  increment = () => {
     const {dispatch} = this.props
-    dispatch(addCount())
+    dispatch(incrementCount())
+  }
+
+  decrement = () => {
+    const {dispatch} = this.props
+    dispatch(decrementCount())
+  }
+
+  reset = () => {
+    const {dispatch} = this.props
+    dispatch(resetCount())
   }
 
   render () {
     const { count } = this.props
     return (
       <div>
-        <h1>AddCount: <span>{count}</span></h1>
-        <button onClick={this.add}>Add To Count</button>
+        <h1>Count: <span>{count}</span></h1>
+        <button onClick={this.increment}>+1</button>
+        <button onClick={this.decrement}>-1</button>
+        <button onClick={this.reset}>Reset</button>
       </div>
     )
   }
@@ -24,4 +36,4 @@ function mapStateToProps (state) {
   return {count}
 }
 
-export default connect(mapStateToProps)(AddCount)
+export default connect(mapStateToProps)(Counter)

examples/with-redux/components/examples.js

@@ -1,4 +1,3 @@
-
 import {connect} from 'react-redux'
 import Clock from './clock'
 import Counter from './counter'

examples/with-redux/pages/_app.js

@@ -6,11 +6,13 @@ import { Provider } from 'react-redux'
 class MyApp extends App {
   render () {
     const {Component, pageProps, reduxStore} = this.props
-    return <Container>
-      <Provider store={reduxStore}>
-        <Component {...pageProps} />
-      </Provider>
-    </Container>
+    return (
+      <Container>
+        <Provider store={reduxStore}>
+          <Component {...pageProps} />
+        </Provider>
+      </Container>
+    )
   }
 }
 

examples/with-redux/pages/index.js

@@ -1,13 +1,12 @@
 import React from 'react'
 import {connect} from 'react-redux'
-import {startClock, addCount, serverRenderClock} from '../store'
+import {startClock, serverRenderClock} from '../store'
 import Examples from '../components/examples'
 
-class Counter extends React.Component {
+class Index extends React.Component {
   static getInitialProps ({ reduxStore, req }) {
     const isServer = !!req
     reduxStore.dispatch(serverRenderClock(isServer))
-    reduxStore.dispatch(addCount())
 
     return {}
   }
@@ -28,4 +27,4 @@ class Counter extends React.Component {
   }
 }
 
-export default connect()(Counter)
+export default connect()(Index)

examples/with-redux/store.js

@@ -9,19 +9,32 @@ const exampleInitialState = {
 }
 
 export const actionTypes = {
-  ADD: 'ADD',
-  TICK: 'TICK'
+  TICK: 'TICK',
+  INCREMENT: 'INCREMENT',
+  DECREMENT: 'DECREMENT',
+  RESET: 'RESET'
 }
 
 // REDUCERS
 export const reducer = (state = exampleInitialState, action) => {
   switch (action.type) {
     case actionTypes.TICK:
-      return Object.assign({}, state, { lastUpdate: action.ts, light: !!action.light })
-    case actionTypes.ADD:
+      return Object.assign({}, state, {
+        lastUpdate: action.ts,
+        light: !!action.light
+      })
+    case actionTypes.INCREMENT:
       return Object.assign({}, state, {
         count: state.count + 1
       })
+    case actionTypes.DECREMENT:
+      return Object.assign({}, state, {
+        count: state.count - 1
+      })
+    case actionTypes.RESET:
+      return Object.assign({}, state, {
+        count: exampleInitialState.count
+      })
     default: return state
   }
 }
@@ -38,8 +51,16 @@ export const startClock = dispatch => {
   }, 1000)
 }
 
-export const addCount = () => dispatch => {
-  return dispatch({ type: actionTypes.ADD })
+export const incrementCount = () => dispatch => {
+  return dispatch({ type: actionTypes.INCREMENT })
+}
+
+export const decrementCount = () => dispatch => {
+  return dispatch({ type: actionTypes.DECREMENT })
+}
+
+export const resetCount = () => dispatch => {
+  return dispatch({ type: actionTypes.RESET })
 }
 
 export function initializeStore (initialState = exampleInitialState) {