first commit

package.json

@@ -5,7 +5,10 @@
   "dependencies": {
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-scripts": "2.1.1"
+    "react-redux": "^5.1.1",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "2.1.1",
+    "redux": "^4.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,28 +0,0 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
-    );
-  }
-}
-
-export default App;

src/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});

src/Reducers/index.js

@@ -0,0 +1,7 @@
+import { combineReducers } from "redux";
+
+import test1 from "./test1";
+
+export default combineReducers({
+	test1
+});

src/Reducers/test1.js

@@ -0,0 +1,47 @@
+import * as types from "../contants/actionTypes";
+
+const initState = {
+	dataFetch: [],
+	title: "",
+	cuntry: ""
+};
+
+export default (state = initState, { type, payload }) => {
+	switch (type) {
+		case types.ADD: {
+			return {
+				...state,
+				count: state.count + 1
+			};
+		}
+		case types.DEC: {
+			return {
+				...state,
+				count: state.count - 1
+			};
+		}
+
+		case types.REQUEST: {
+			return {
+				...state,
+				isFetching: true
+			};
+		}
+		case types.REQUEST_SUCCESS: {
+			return {
+				...state,
+				data: "tony",
+				isFetching: false
+			};
+		}
+
+		case types.REQUEST_FAIL: {
+			return {
+				...state,
+				isFetching: false
+			};
+		}
+		default:
+			return state;
+	}
+};

src/actions/test1.js

@@ -0,0 +1,36 @@
+import * as types from "../contants/actionTypes";
+
+export const add = payload => ({
+	type: types.ADD,
+	payload
+});
+
+export const dec = payload => ({
+	type: types.DEC,
+	payload
+});
+
+const request = payload => ({
+	type: types.REQUEST,
+	payload
+});
+
+const requestOk = payload => ({
+	type: types.REQUEST_SUCCESS,
+	payload
+});
+
+const requestFail = payload => ({
+	type: types.REQUEST_FAIL,
+	payload
+});
+
+// export const requestGO = payload => {
+// 	return dispatch => {
+// 		dispatch(request());
+// 		return fetch
+// 			.get()
+// 			.then(response => dispatch(requestOk(response)))
+// 			.catch(err => dispatch(requestFail(err)));
+// 	};
+// };

src/components/home-page/index.js

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+
+export default class Homopage extends Component {
+	render() {
+		const { add, dec } = this.props;
+		return (
+			<div>
+				Hello I am Home page
+				<button onClick={add}>+</button>
+				<button onClick={dec}>-</button>
+			</div>
+		);
+	}
+}

src/container/App.js

@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
+
+import HomePage from "../components/home-page";
+import { add, dec } from "../actions/test1";
+
+import logo from "./logo.svg";
+import "./App.css";
+
+class App extends Component {
+	render() {
+		const { counter, add, dec } = this.props;
+		console.log("erw", this.props);
+		return (
+			<div className="App">
+				<header className="App-header">
+					<img src={logo} className="App-logo" alt="logo" />
+					<p>
+						Edit <code>src/App.js</code> and save to reload.
+					</p>
+					<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
+						Learn React {counter}
+					</a>
+				</header>
+				<HomePage dec={dec} add={add} />
+			</div>
+		);
+	}
+}
+
+const mapStateToProps = state => ({
+	counter: state.test1.count
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ add, dec }, dispatch);
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(App);

src/container/test2.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Test2 extends Component {
+	render() {
+		return <div>HELLO DUUUUDE</div>;
+	}
+}

src/contants/actionTypes.js

@@ -0,0 +1,6 @@
+export const ADD = "ADD";
+export const DEC = "DEC";
+
+export const REQUEST = "REQUEST";
+export const REQUEST_SUCCESS = "REQUEST_SUCCESS";
+export const REQUEST_FAIL = "REQUEST_FAIL";

src/index.js

@@ -1,10 +1,21 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import { Provider } from "react-redux";
+import { BrowserRouter } from "react-router-dom";
+import ReactDOM from "react-dom";
+import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import Router from "./router";
+
+import store from "./state/state";
+
+ReactDOM.render(
+	<BrowserRouter>
+		<Provider store={store}>
+			<Router />
+		</Provider>
+	</BrowserRouter>,
+	document.getElementById("root")
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/router.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { Switch, Route, Link } from "react-router-dom";
+import App from "./container/App";
+import Test2 from "./container/test2";
+
+export default () => (
+	<div>
+		<nav>
+			<ul>
+				<li>
+					<Link to="/">Home</Link>
+				</li>
+				<li>
+					<Link to="/about/">About</Link>
+				</li>
+				<li>
+					<Link to="/users/">Users</Link>
+				</li>
+			</ul>
+		</nav>
+		<Switch>
+			<div>
+				<Route path="/" exact component={App} />
+				<Route exact path="/about/" component={Test2} />
+				<Route exact path="/users/" render={() => <div>ololo</div>} />
+			</div>
+		</Switch>
+	</div>
+);

src/state/state.js

@@ -0,0 +1,10 @@
+import { createStore } from "redux";
+// import logger from "redux-logger";
+
+import reducers from "../Reducers";
+
+export default createStore(
+	reducers
+	// composeEnhancers(applyMiddleware(logger, sagaMiddleware)),
+	// applyMiddleware(logger, sagaMiddleware)
+);