Merge pull request #6 from vladimir-paziuk/feature/react-router

TypeScript / Redux / Redux sagas / React router v4

Author: bradtraversy

.gitignore

@@ -1,3 +1,72 @@
+################################################
+# Dependencies
+#
+# When releasing a production app, you may
+# consider including your node_modules and
+# bower_components directory in your git repo,
+# but during development, its best to exclude it,
+# since different developers may be working on
+# different kernels, where dependencies would
+# need to be recompiled anyway.
+#
+# More on that here about node_modules dir:
+# http://www.futurealoof.com/posts/nodemodules-in-git.html
+# (credit Mikeal Rogers, @mikeal)
+#
+# About bower_components dir, you can see this:
+# http://addyosmani.com/blog/checking-in-front-end-dependencies/
+# (credit Addy Osmani, @addyosmani)
+#
+################################################
+
 node_modules
+bower_components
 dist
-package-lock.json
+
+
+
+################################################
+# Sails.js / Waterline / Grunt
+#
+# Files generated by Sails and Grunt, or related
+# tasks and adapters.
+################################################
+.tmp
+dump.rdb
+
+
+
+
+
+################################################
+# Node.js / NPM
+#
+# Common files generated by Node, NPM, and the
+# related ecosystem.
+################################################
+lib-cov
+*.seed
+*.log
+*.out
+*.pid
+npm-debug.log
+
+
+
+
+
+################################################
+# Miscellaneous
+#
+# Common files generated by text editors,
+# operating systems, file systems, etc.
+################################################
+
+*~
+*#
+.DS_STORE
+.netbeans
+nbproject
+.idea
+.node_history
+package-lock.json

README.md

@@ -1,6 +1,3 @@
-# React Webpack Starter
-> This is a boilerplate for React 16 & Webpack 4. It includes webpack-dev-server and a build script
-
 ## Quick Start
 
 ``` bash
@@ -13,18 +10,3 @@ npm start
 # Build for production
 npm run build
 ```
-
-## App Info
-
-### Author
-
-Brad Traversy
-[Traversy Media](http://www.traversymedia.com)
-
-### Version
-
-1.0.0
-
-### License
-
-This project is licensed under the MIT License

package.json

@@ -5,24 +5,53 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server --mode development --open --hot",
-    "build": "webpack --mode production"
+    "build": "./node_modules/.bin/webpack --mode production"
   },
-  "author": "Brad Traversy",
+  "author": "Brad Traversy & Vladimir Paziuk",
   "license": "MIT",
   "dependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "history": "^4.7.2",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-redux": "^5.0.7",
+    "react-router-dom": "^4.3.1",
+    "react-router-redux": "^5.0.0-alpha.9",
+    "redux": "^4.0.0",
+    "redux-saga": "^0.16.0"
   },
   "devDependencies": {
+    "@types/history": "^4.7.0",
+    "@types/react": "^16.4.7",
+    "@types/react-dom": "^16.0.6",
+    "@types/react-redux": "^6.0.6",
+    "@types/react-router-dom": "^4.3.0",
+    "@types/react-router-redux": "^5.0.15",
+    "autoprefixer": "^9.0.2",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
+    "clean-webpack-plugin": "^0.1.19",
     "css-loader": "^0.28.11",
+    "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.1.0",
+    "node-sass": "^4.9.2",
+    "postcss-loader": "^2.1.6",
+    "redux-devtools-extension": "^2.13.5",
+    "sass-loader": "^7.0.3",
     "style-loader": "^0.20.3",
+    "ts-loader": "^4.4.2",
+    "tslint": "^5.11.0",
+    "tslint-loader": "^3.6.0",
+    "tslint-react": "^3.6.0",
+    "typescript": "^2.9.2",
     "webpack": "^4.4.0",
     "webpack-cli": "^2.0.13",
     "webpack-dev-server": "^3.1.1"
+  },
+  "browserslist": {
+    "production": [
+      "last 3 version"
+    ]
   }
 }

src/App.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { compose } from "redux";
+import { withRouter } from "react-router-dom";
+
+import routes from "./routes";
+
+class App extends React.Component<any, {}> {
+    render(): JSX.Element {
+        console.log(this.props);
+
+        return (
+            <div>
+                {routes}
+            </div>
+        );
+    }
+}
+
+export default compose(
+    withRouter,
+)(App);

src/actions/MainActions/MainTypes.ts

@@ -0,0 +1 @@
+export const FETCH_DATA: string = "main => FETCH_DATA";

src/actions/MainActions/index.tsx

@@ -0,0 +1,21 @@
+import { FETCH_DATA } from "./MainTypes";
+import { START, SUCCESS, ERROR } from "../commonActionTypes";
+import { IActionCreator } from "../../interfaces/IReducers";
+
+export const startFetchingData: IActionCreator = () => ({
+    type: FETCH_DATA + START,
+});
+
+export const fetchDataSuccess: IActionCreator<string[]> = (payload) => ({
+    type: FETCH_DATA + SUCCESS,
+    payload,
+});
+
+export const fetchDataError: IActionCreator<string> = (payload) => ({
+    type: FETCH_DATA + ERROR,
+    payload,
+});
+
+export const fetchData: IActionCreator = () => ({
+    type: FETCH_DATA,
+});

src/actions/commonActionTypes.ts

@@ -0,0 +1,5 @@
+export const START: string = "_START";
+export const STOP: string = "_STOP";
+export const RESET: string = "_RESET";
+export const SUCCESS: string = "_SUCCESS";
+export const ERROR: string = "_ERROR";

src/actions/createRequestTypes.ts

@@ -0,0 +1,16 @@
+const REQUEST: string = "REQUEST";
+const SUCCESS: string = "SUCCESS";
+const FAILURE: string = "FAILURE";
+
+export interface IRequestTypes {
+    [key: string]: string;
+}
+
+function createRequestTypes(base: string): IRequestTypes {
+    return [REQUEST, SUCCESS, FAILURE].reduce((acc: IRequestTypes, type) => {
+        acc[type] = `${base}_${type}`;
+        return acc;
+    }, {});
+}
+
+export default createRequestTypes;

src/components/App.js

@@ -2,14 +2,14 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>My React App</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My React App</title>
 </head>
 
 <body>
-  <div id="app"></div>
+    <div id="app"></div>
 </body>
 
-</html>
+</html>