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