React + React Router v4 + Redux

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",

src/App.js

@@ -1,6 +1,5 @@
-import React, { Component } from 'react'
+import React from 'react'
-import logo from './logo.svg'
+// import './App.css'
-import './App.css'
 import { Switch, Route } from 'react-router-dom'
 
 import Header from './container/Header'

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
+})

src/constants/ActionTypes.js

@@ -0,0 +1,3 @@
+
+export const FIRST_INCREMENT_COUNTER = 'FIRST_INCREMENT_COUNTER'
+export const FIRST_ASSIGN_ID = 'FIRST_ASSIGN_ID'

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
+const mapStateToProps = state => ({
+  counter: getCounter(state.first)
+})
+export default connect(
+  mapStateToProps,
+  { incFirstCounter }
+)(Main)

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>
+  <Provider store={store}>
-    <App />
+    <HashRouter>
-  </HashRouter>
+      <App />
+    </HashRouter>
+  </Provider>
 ), document.getElementById('root'))
 
 // ReactDOM.render(<App />, document.getElementById('root'))

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

src/reducers/index.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux'
+import first from './first'
+
+export default combineReducers({
+  first
+})