Routing with redux

Author: taesup

package-lock.json

@@ -3,9 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "react-scripts": "2.1.1"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-redux": "^7.0.3",
+    "react-router-dom": "^5.0.0",
+    "react-scripts": "2.1.1",
+    "redux": "^4.0.1",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -0,0 +1,29 @@
+/**
+ * ACTIONS
+ */
+export const LOGIN = 'LOGIN';
+export const LOGOUT = 'LOGOUT';
+export const REDIRECT = 'REDIRECT';
+
+/**
+ * Action Creators
+ */
+export function login(username) {
+  return {
+    type: LOGIN,
+    payload: username,
+  };
+}
+
+export function logout() {
+  return {
+    type: LOGOUT,
+  };
+}
+
+export function redirect(url) {
+  return {
+    type: REDIRECT,
+    payload: url,
+  };
+}

src/App.test.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+class About extends Component {
+  render() {
+    return <div>About Page</div>;
+  }
+}
+
+export default About;

src/actions/index.js

@@ -0,0 +1,2 @@
+import About from './About.jsx';
+export default About;

src/components/About/About.jsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+class Contact extends Component {
+  constructor(props) {
+    super(props);
+
+    this.clickHandler = this.clickHandler.bind(this);
+  }
+
+  clickHandler() {
+    const id = this.props.match.params.id;
+    const newId = Number(id) + 1;
+    this.props.history.push('/contact/' + newId);
+  }
+
+  render() {
+    const { params } = this.props.match;
+    return (
+      <div>
+        Contact Page {params.id}
+        <button onClick={this.clickHandler}>Increment</button>
+      </div>
+    );
+  }
+}
+
+export default Contact;

src/components/About/index.js

@@ -0,0 +1,2 @@
+import Contact from './Contact.jsx';
+export default Contact;

src/components/Contact/Contact.jsx

@@ -0,0 +1,16 @@
+.header ul {
+  margin: 0;
+  padding: 15px;
+  background-color: #094fbf;
+}
+
+.header ul li {
+  margin-right: 25px;
+  list-style-type: none;
+  display: inline-block;
+}
+
+.header ul li a {
+  text-decoration: none;
+  color: white;
+}

src/components/Contact/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { logout } from '../../actions';
+import { connect } from 'react-redux';
+import './Header.css';
+
+const _Header = (props) => {
+  return (
+    <div className="header">
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/about">Users</Link>
+        </li>
+        <li>
+          <Link to="/contact/5">Contact</Link>
+        </li>
+        <li>
+          <Link to="/protected">Protected</Link>
+        </li>
+        {props.loggedIn ? (
+          <li>
+            <button onClick={props.logout}>Logout</button>
+          </li>
+        ) : (
+          ''
+        )}
+      </ul>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    loggedIn: state.loggedIn,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    logout: () => {
+      return dispatch(logout());
+    },
+  };
+};
+
+const Header = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(_Header);
+
+export default Header;