redux

package-lock.json

@@ -3636,6 +3636,11 @@
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
+    "deep-diff": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
+      "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ="
+    },
     "deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
@@ -6374,6 +6379,28 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
+      "requires": {
+        "invariant": "^2.2.1",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^2.2.0",
+        "value-equal": "^0.4.0",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6389,6 +6416,14 @@
       "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
       "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
     },
+    "hoist-non-react-statics": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz",
+      "integrity": "sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==",
+      "requires": {
+        "react-is": "^16.3.2"
+      }
+    },
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -9321,6 +9356,11 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pjs": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/pjs/-/pjs-5.1.2.tgz",
+      "integrity": "sha512-aoPrjtnYOknat/wiO5hyCkub7LymxSY1BN8gIsW49PfbdPyQiaU+UOo9DfSEhhl48cWLd28IwpERutBveLdQLA=="
+    },
     "pkg-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
@@ -13255,6 +13295,86 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.2.tgz",
       "integrity": "sha512-7kEBKwU9R8fKnZJBRa5RSIfay4KJwnYvKB6gODGicUmDSAhQJ7Tdnll5S0RLtYrzRfMVXlqYw61rzrSpP4ThLQ=="
     },
+    "react-is": {
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz",
+      "integrity": "sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g=="
+    },
+    "react-redux": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.0.tgz",
+      "integrity": "sha512-EmbC3uLl60pw2VqSSkj6HpZ6jTk12RMrwXMBdYtM6niq0MdEaRq9KYCwpJflkOZj349BLGQm1MI/JO1W96kLWQ==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "hoist-non-react-statics": "^3.2.1",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.2.0.tgz",
+          "integrity": "sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
+    "react-router": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
+      "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
+      "requires": {
+        "history": "^4.7.2",
+        "hoist-non-react-statics": "^2.5.0",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.1",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
+      "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
+      "requires": {
+        "history": "^4.7.2",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.1",
+        "react-router": "^4.3.1",
+        "warning": "^4.0.1"
+      }
+    },
     "react-scripts": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.3.tgz",
@@ -13646,6 +13766,28 @@
         "minimatch": "3.0.4"
       }
     },
+    "redux": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.1.tgz",
+      "integrity": "sha512-R7bAtSkk7nY6O/OYMVR9RiBI+XghjF9rlbl5806HJbQph0LJVHZrU5oaO4q70eUKiqMRqm4y07KLTlMZ2BlVmg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
+    "redux-logger": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
+      "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
+      "requires": {
+        "deep-diff": "^0.3.5"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -13929,6 +14071,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -15208,6 +15355,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
@@ -15376,6 +15528,14 @@
         "xtend": "~4.0.1"
       }
     },
+    "thunk": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/thunk/-/thunk-0.0.1.tgz",
+      "integrity": "sha1-ZXWwC6Nv9MbF7fhPkjISI5oKfDc=",
+      "requires": {
+        "pjs": "*"
+      }
+    },
     "thunky": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.0.3.tgz",
@@ -15902,6 +16062,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -15956,6 +16121,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
+      "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watch": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz",

package.json

@@ -5,7 +5,13 @@
   "dependencies": {
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "react-scripts": "2.1.3"
+    "react-redux": "^6.0.0",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "2.1.3",
+    "redux": "^4.0.1",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
+    "thunk": "0.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/actions/counter.js

@@ -0,0 +1,6 @@
+import * as types from "../constants/ActionTypes";
+
+export const increase = payload => ({
+	type: types.INCREASE,
+	payload
+});

src/actions/post.js

@@ -0,0 +1,43 @@
+import * as types from "../constants/ActionTypes";
+
+const getPosts = payload => ({
+	type: types.GET_POSTS,
+	payload
+});
+
+const getPost = payload => ({
+	type: types.GET_POST,
+	payload
+});
+
+// export const getPostRequest = () => {
+// 	return dispatch => {
+// 		return fetch("https://jsonplaceholder.typicode.com/todos/1")
+// 			.then(response => response.json())
+// 			.then(json => dispatch(getPosts(json)));
+// 	};
+// };
+
+export const getPostRequest = () => dispatch =>
+	fetch("https://jsonplaceholder.typicode.com/posts")
+		.then(response => response.json())
+		.then(json => dispatch(getPosts(json)));
+// .catch(err => dispatch(getPostsFail()))
+
+export const getOnePostRequest = payload => dispatch =>
+	fetch(`https://jsonplaceholder.typicode.com/posts/${payload}`)
+		.then(response => response.json())
+		.then(json => dispatch(getPost(json)));
+
+// const getPost = payload => ({
+// 	type: types.GET_POST,
+// 	payload
+// });
+// const getPostSuc = payload => ({
+// 	type: types.GET_POST_SUC,
+// 	payload
+// });
+// const getPostFail = payload => ({
+// 	type: types.GET_POST_FAIL,
+// 	payload
+// });

src/components/list/index.js

@@ -1,5 +1,15 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
-// export default ({ posts }) => posts.map(el => <li key={el.id}>{el.title}</li>);
+import "./style.css";
 
-export default ({ id, title }) => <li>{`${title} + ${id}`}</li>;
+export default props => {
+	return (
+		<div className="post-box">
+			<h3 className="post-name">
+				<Link to={`post/${props.id}`}>{props.name}</Link>
+			</h3>
+			<p className="post-decs">{props.description}</p>
+		</div>
+	);
+};

src/components/list/style.css

@@ -0,0 +1,14 @@
+.post-box {
+	width: 100%;
+	border: 1px solid #eee;
+	padding: 30px;
+	margin-top: 50px;
+	margin-right: 20px;
+}
+
+.post-name {
+	text-align: center;
+}
+
+.post-name {
+}

src/components/post/index.js

@@ -0,0 +1,15 @@
+import React, { Component } from "react";
+
+export default class Post extends Component {
+	render() {
+		const { onePost } = this.props;
+		return onePost ? (
+			<div>
+				<h1>{onePost.title}</h1>
+				{onePost.body}
+			</div>
+		) : (
+			<div>NOT DATA</div>
+		);
+	}
+}

src/constants/ActionTypes.js

@@ -0,0 +1,4 @@
+export const INCREASE = "INCREASE";
+
+export const GET_POSTS = "GET_POSTS";
+export const GET_POST = "GET_POST";

src/constants/mockData.js

@@ -0,0 +1,30 @@
+export default [
+	{
+		id: 1,
+		name: "First",
+		description:
+			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis tempora accusantium ducimus aliquam quisquam porro nesciunt amet repellat deleniti, corporis explicabo consequatur accusamus molestias, consequuntur ipsa culpa corrupti harum dolorum fugit distinctio vero obcaecati! Provident in minima veritatis obcaecati nam, ab magni nulla temporibus adipisci a eos consequuntur. Voluptas, sunt?",
+		showDescr: true
+	},
+	{
+		id: 2,
+		name: "Second",
+		description:
+			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis tempora accusantium ducimus aliquam quisquam porro nesciunt amet repellat deleniti, corporis explicabo consequatur accusamus molestias, consequuntur ipsa culpa corrupti harum dolorum fugit distinctio vero obcaecati! Provident in minima veritatis obcaecati nam, ab magni nulla temporibus adipisci a eos consequuntur. Voluptas, sunt?",
+		showDescr: false
+	},
+	{
+		id: 3,
+		name: "Third",
+		description:
+			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis tempora accusantium ducimus aliquam quisquam porro nesciunt amet repellat deleniti, corporis explicabo consequatur accusamus molestias, consequuntur ipsa culpa corrupti harum dolorum fugit distinctio vero obcaecati! Provident in minima veritatis obcaecati nam, ab magni nulla temporibus adipisci a eos consequuntur. Voluptas, sunt?",
+		showDescr: false
+	},
+	{
+		id: 4,
+		name: "Fourth",
+		description:
+			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis tempora accusantium ducimus aliquam quisquam porro nesciunt amet repellat deleniti, corporis explicabo consequatur accusamus molestias, consequuntur ipsa culpa corrupti harum dolorum fugit distinctio vero obcaecati! Provident in minima veritatis obcaecati nam, ab magni nulla temporibus adipisci a eos consequuntur. Voluptas, sunt?",
+		showDescr: true
+	}
+];

src/conteiners/App.css

@@ -1,32 +1,36 @@
 .App {
-  text-align: center;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	max-width: 800px;
+	margin: 0 auto;
 }
 
 .App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
+	animation: App-logo-spin infinite 20s linear;
+	height: 40vmin;
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }

src/conteiners/App.js

@@ -1,70 +1,40 @@
 import React, { Component } from "react";
-import logo from "./logo.svg";
 import "./App.css";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import * as actions from "../actions/counter";
+import { getPostRequest } from "../actions/post";
 
-import Count from "../components/counter";
-import Button from "../components/button";
+// import Count from "../components/counter";
+// import Button from "../components/button";
 import List from "../components/list";
+// import mockPosts from "../constants/mockData";
 
 class App extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			count: 0,
-			value: "",
-			posts: [],
-			showPosts: false
-		};
-
-		this.test = this.test.bind(this);
-		console.log("its constuctor");
-	}
-
-	showButton = () => this.setState({ showPosts: true });
-
 	componentDidMount() {
-		fetch("https://jsonplaceholder.typicode.com/posts")
-			.then(response => response.json())
-			.then(json => this.setState({ posts: json }));
-	}
-
-	test() {
-		console.log("test");
+		this.props.getPostRequest();
 	}
 
-	increseCounter = () => this.setState(prevState => ({ count: prevState.count + 1 }));
-
-	changeValue = e => this.setState({ value: e.target.value });
-
 	render() {
-		const { count, value, posts, showPosts } = this.state;
+		const { posts } = 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 {value}
-					</a>
-					<Count count={count} />
-					<Button text="CLICK MEEEE" onClick={this.increseCounter} />
-					<Button text="SHOW POSTS" onClick={this.showButton} />
-					<input type="text" value={value} onChange={e => this.changeValue(e)} />
-				</header>
-				{showPosts ? (
-					<ul>
-						{posts.map(el => (
-							<List key={el.id} id={el.id} title={el.title} />
-						))}
-					</ul>
-				) : (
-					<div>NOT KOMLETE YET</div>
-				)}
+				{posts.map(el => (
+					<List key={el.id} id={el.id} name={el.title} description={el.body} />
+				))}
 			</div>
 		);
 	}
 }
 
-export default App;
+const mapStateToProps = state => ({
+	count: state.counter.data,
+	posts: state.posts.data
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ ...actions, getPostRequest }, dispatch);
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(App);

src/conteiners/Header.js

@@ -0,0 +1,31 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+
+const links = [
+	{
+		id: 1,
+		path: "/",
+		title: "Home"
+	},
+	{
+		id: 2,
+		path: "/post",
+		title: "Post"
+	}
+];
+
+export default class Header extends Component {
+	render() {
+		return (
+			<div>
+				<ul>
+					{links.map(el => (
+						<li key={el.id}>
+							<Link to={el.path}>{el.title}</Link>
+						</li>
+					))}
+				</ul>
+			</div>
+		);
+	}
+}

src/conteiners/Hello.js

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

src/conteiners/Post.js

@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { getOnePostRequest } from "../actions/post";
+
+import PostComponent from "../components/post";
+
+class Post extends Component {
+	componentDidMount() {
+		const { match, getOnePostRequest } = this.props;
+		getOnePostRequest(match.params.id);
+	}
+
+	render() {
+		console.log("parent", this.props);
+		return (
+			<div>
+				<PostComponent onePost={this.props.onePost} />
+			</div>
+		);
+	}
+}
+
+const mapStateToProps = state => ({
+	onePost: state.posts.onePost
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ getOnePostRequest }, dispatch);
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(Post);

src/index.js

@@ -1,13 +1,17 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
 import "./index.css";
-import App from "./conteiners/App";
-// import Hello from "./test";
-import * as serviceWorker from "./serviceWorker";
+// import App from "./conteiners/App";
+import Router from "./router";
+import store from "./state";
 
-ReactDOM.render(<App />, 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.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(
+	<BrowserRouter>
+		<Provider store={store}>
+			<Router />
+		</Provider>
+	</BrowserRouter>,
+	document.getElementById("root")
+);

src/initialState.js

@@ -0,0 +1,9 @@
+export default {
+	counter: {
+		data: 0
+	},
+	posts: {
+		data: [],
+		onePost: null
+	}
+};

src/reducers/counter.js

@@ -0,0 +1,14 @@
+import * as types from "../constants/ActionTypes";
+
+import initialState from "../initialState";
+
+export default (state = initialState.counter, action) => {
+	switch (action.type) {
+		case types.INCREASE: {
+			console.log("INCREASE", action);
+			return { ...state, data: state.data + 1 };
+		}
+		default:
+			return state;
+	}
+};

src/reducers/index.js

@@ -0,0 +1,11 @@
+import { combineReducers } from "redux";
+
+import counter from "./counter";
+import posts from "./posts";
+
+const combinedReducers = combineReducers({
+	counter,
+	posts
+});
+
+export default combinedReducers;

src/reducers/posts.js

@@ -0,0 +1,28 @@
+import * as types from "../constants/ActionTypes";
+
+import initialState from "../initialState";
+
+export default (state = initialState.posts, { payload, type }) => {
+	switch (type) {
+		case types.GET_POSTS: {
+			return { ...state, data: payload };
+		}
+		case types.GET_POST: {
+			return { ...state, onePost: payload };
+		}
+
+		// case R: {
+		// 	return {...state, isFetching: true }
+		// }
+
+		// case RS: {
+		// 	return {...state, isFetching: false }
+		// }
+
+		// case RF: {
+		// 	return {...state, isFetching: false }
+		// }
+		default:
+			return state;
+	}
+};

src/router.js

@@ -0,0 +1,37 @@
+import React, { Fragment } from "react";
+import { Switch, Route, Redirect } from "react-router-dom";
+
+import Header from "./conteiners/Header";
+import App from "./conteiners/App";
+import Hello from "./conteiners/Hello";
+import Post from "./conteiners/Post";
+
+// const router = [
+// 	{
+// 		component: App,
+// 		path: '/',
+
+// 	},
+// ]
+
+// const Aux = props => props.childlen
+
+export default () => (
+	<Fragment>
+		<Header />
+		<Switch>
+			{/* <Route path="/" render={props => {
+				const user = localStorage.getItem('ololo');
+				if(!user) {
+					return <Redirect to="/auth" />
+				}
+				return <App {...props} />}
+			} /> */}
+			<Route path="/" exact component={Hello} />
+			<Route path="/post" exact component={App} />
+			<Route path="/post/:id" exact component={Post} />
+
+			{/* {router.map(el => <Route path={el.path} component={el.component} />)} */}
+		</Switch>
+	</Fragment>
+);

src/state.js

@@ -0,0 +1,8 @@
+import { createStore, applyMiddleware } from "redux";
+// import redux from "redux-logger";
+import thunk from "redux-thunk";
+
+import combinedReducers from "./reducers";
+import initialState from "./initialState";
+
+export default createStore(combinedReducers, initialState, applyMiddleware(thunk));

src/test.js

@@ -1,12 +0,0 @@
-import React from "react";
-
-const hello = () =>
-	React.createElement(
-		"div",
-		{
-			style: { color: "red" }
-		},
-		"HELLO DUDE"
-	);
-
-export default hello;