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) => (
Main
12
+
Counter: { props.counter }
+
)
-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((
-
-
-
+
+
+
+
+
), document.getElementById('root'))
// ReactDOM.render(, 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
+})