From f24f5cef28af0f2a52f26371562fe1483b04d2e8 Mon Sep 17 00:00:00 2001
From: sipp11 <sipp11@zzyzx.co>
Date: Thu, 14 Jun 2018 15:51:34 +0900
Subject: [PATCH] React + React Router v4 + Redux

---
 package.json                 |  6 +++++-
 src/App.js                   |  5 ++---
 src/actions/index.js         | 10 ++++++++++
 src/constants/ActionTypes.js |  3 +++
 src/container/Main.js        | 16 ++++++++++++++--
 src/index.js                 | 25 ++++++++++++++++++++++---
 src/reducers/first.js        | 34 ++++++++++++++++++++++++++++++++++
 src/reducers/index.js        |  6 ++++++
 8 files changed, 96 insertions(+), 9 deletions(-)
 create mode 100644 src/actions/index.js
 create mode 100644 src/constants/ActionTypes.js
 create mode 100644 src/reducers/first.js
 create mode 100644 src/reducers/index.js

diff --git a/package.json b/package.json
index c4e4852..66fef79 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,12 @@
   "dependencies": {
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
+    "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "1.1.4"
+    "react-scripts": "1.1.4",
+    "redux": "^4.0.0",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/App.js b/src/App.js
index 7d1c56d..479c404 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,5 @@
-import React, { Component } from 'react'
-import logo from './logo.svg'
-import './App.css'
+import React from 'react'
+// import './App.css'
 import { Switch, Route } from 'react-router-dom'
 
 import Header from './container/Header'
diff --git a/src/actions/index.js b/src/actions/index.js
new file mode 100644
index 0000000..cb503c1
--- /dev/null
+++ b/src/actions/index.js
@@ -0,0 +1,10 @@
+import * as types from '../constants/ActionTypes'
+
+export const incFirstCounter = _ => ({
+  type: types.FIRST_INCREMENT_COUNTER,
+})
+
+export const assignFirstId = objId => ({
+  type: types.FIRST_ASSIGN_ID,
+  newId: objId
+})
diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js
new file mode 100644
index 0000000..eaa7b65
--- /dev/null
+++ b/src/constants/ActionTypes.js
@@ -0,0 +1,3 @@
+
+export const FIRST_INCREMENT_COUNTER = 'FIRST_INCREMENT_COUNTER'
+export const FIRST_ASSIGN_ID = 'FIRST_ASSIGN_ID'
\ No newline at end of file
diff --git a/src/container/Main.js b/src/container/Main.js
index 97c3171..53970eb 100644
--- a/src/container/Main.js
+++ b/src/container/Main.js
@@ -1,13 +1,25 @@
 import React from 'react'
+import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
-const Main = () => (
+import { getCounter } from '../reducers/first'
+import { incFirstCounter } from '../actions'
+
+const Main = (props) => (
   <div>
     Main
 
     <Link to={`/roster/12`}>12</Link>
+    <p>Counter: { props.counter }</p>
+    <p><button onClick={() => props.incFirstCounter() }>Increment</button></p>
   </div>
 )
 
 
-export default Main
\ No newline at end of file
+const mapStateToProps = state => ({
+  counter: getCounter(state.first)
+})
+export default connect(
+  mapStateToProps,
+  { incFirstCounter }
+)(Main)
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 363bf9f..e402bfe 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,12 +4,31 @@ import './index.css'
 import App from './App'
 import registerServiceWorker from './registerServiceWorker'
 import { HashRouter } from 'react-router-dom'
+import thunk from 'redux-thunk'
 
+import { createStore, applyMiddleware, compose } from 'redux'
+import { Provider } from 'react-redux'
+import { createLogger } from 'redux-logger'
+import gruntApp from './reducers'
 
+
+const middleware = [ thunk ]
+if (process.env.NODE_ENV !== 'production') {
+  middleware.push(createLogger())
+}
+/* eslint-disable no-underscore-dangle */
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const enhancer = composeEnhancers(
+  applyMiddleware(...middleware)
+)
+const store = createStore(gruntApp, enhancer)
+/* eslint-enable */
 ReactDOM.render((
-  <HashRouter>
-    <App />
-  </HashRouter>
+  <Provider store={store}>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </Provider>
 ), document.getElementById('root'))
 
 // ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/src/reducers/first.js b/src/reducers/first.js
new file mode 100644
index 0000000..0f0fb36
--- /dev/null
+++ b/src/reducers/first.js
@@ -0,0 +1,34 @@
+import {
+  FIRST_INCREMENT_COUNTER, FIRST_ASSIGN_ID
+} from '../constants/ActionTypes'
+
+const initialState = {
+  counter: 1,
+  id: {}
+}
+
+const first = (state = initialState, action) => {
+  switch (action.type) {
+    case FIRST_INCREMENT_COUNTER:
+      return {
+        ...state,
+        counter: state.counter +1
+      }
+      case FIRST_ASSIGN_ID:
+        return {
+          ...state,
+          id: action.newId
+        }
+    default:
+      return {
+        counter: 1,
+        id: {}
+      }
+  }
+}
+
+export default first
+
+
+export const getCounter = state => state.counter
+export const getId = state => state.id
\ No newline at end of file
diff --git a/src/reducers/index.js b/src/reducers/index.js
new file mode 100644
index 0000000..b0df4b5
--- /dev/null
+++ b/src/reducers/index.js
@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux'
+import first from './first'
+
+export default combineReducers({
+  first
+})