Added a counter managed by Redux

package.json

@@ -3,10 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
+    "react-motion": "^0.5.0",
+    "react-redux": "^5.0.5",
     "react-router-dom": "^4.1.1",
-    "react-motion": "^0.5.0"
+    "redux": "^3.7.0"
   },
   "devDependencies": {
     "eslint": "^3.19.0",
@@ -25,8 +28,8 @@
     "eject": "react-scripts eject"
   },
   "lint-staged": {
-      "*.js": [
-      "prettier --single-quote --trailing-comma --write",
+    "*.js": [
+      "prettier --single-quote --es5 --write",
       "git add"
     ]
   }

src/components/Counter/index.js

@@ -0,0 +1,76 @@
+import { createStore } from 'redux';
+import { Provider, connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// action creator
+const ADD = 'ADD';
+const MINUS = 'MINUS';
+function add() {
+  return { type: ADD };
+}
+function minus() {
+  return { type: MINUS };
+}
+
+// reducer
+const app = (state = 0, action) => {
+  switch (action.type) {
+    case ADD:
+      return state + 1;
+    case MINUS:
+      if (state <= 0) {
+        alert('Gotcha. The counter has to be positive!');
+        return state;
+      }
+      return state - 1;
+    default:
+      return state;
+  }
+};
+
+// create store
+let store = createStore(app);
+
+// react component
+const StaticCounter = props =>
+  <div>
+    <p>This state of this counter is managed by Redux instead of React.</p>
+    <h2>{props.value}</h2>
+    <button onClick={props.handleClickAdd}>Add </button>
+    <button onClick={props.handleClickMinus}>Minus </button>
+  </div>;
+
+StaticCounter.propTypes = {
+  value: PropTypes.number.isRequired,
+  handleClickAdd: PropTypes.func.isRequired,
+  handleClickMinus: PropTypes.func.isRequired
+};
+// activate the container StaticCounter
+const mapStateToProps = state => {
+  return {
+    value: state
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    handleClickAdd: () => {
+      dispatch(add());
+    },
+    handleClickMinus: () => {
+      dispatch(minus());
+    }
+  };
+};
+
+const ActiveCounter = connect(mapStateToProps, mapDispatchToProps)(
+  StaticCounter
+);
+
+// passing the store
+const Counter = () =>
+  <Provider store={store}>
+    <ActiveCounter />
+  </Provider>;
+export default Counter;

src/components/Nav/index.js

@@ -8,6 +8,7 @@ const Nav = () =>
     <li><NavLink to="/" exact={true}>Home</NavLink></li>
     <li><NavLink to="/Toggle">Toggle</NavLink></li>
     <li><NavLink to="/tabs">Tab View</NavLink></li>
+    <li><NavLink to="/counter">Counter</NavLink></li>
     <li><NavLink to="/tabss">Test 404</NavLink></li>
   </ul>;
 

src/routes.js

@@ -7,6 +7,7 @@ import Nav from './components/Nav';
 import Toggle from './components/Toggle';
 import Home from './components/Home';
 import TabView from './components/Tabs';
+import Counter from './components/Counter';
 import NotFound from './components/NotFound';
 
 const Routes = props =>
@@ -19,6 +20,7 @@ const Routes = props =>
           <Route path="/" exact component={Home} />
           <Route path="/Toggle" component={Toggle} />
           <Route path="/tabs" component={TabView} />
+          <Route path="/counter" component={Counter} />
           <Route component={NotFound} />
         </Switch>
       </main>