Merge pull request BiosBoy#6 from BiosBoy/templater-routing

Added React-Redux app routing
songyanbo · Nov 16, 2018 · cf70646 · cf70646
2 parents a3c888c + a2ecf1b
commit cf70646
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 ## Webpack4 - React16.7 Templater App
 
 
+# 0.5.0
+ * Integrated React-Routing for app routring.
+
 # 0.4.0
  * Integrated Redux state managment in the app.
  * Integrated Redux saga for async actions managment.

diff --git a/README.md b/README.md
@@ -42,6 +42,10 @@ So, by using this **Templater** you will save a lot of time and will stay focuse
  * Redux^4.0.1 is fully integrated with React to start your work asap.
  * Including Redux-Saga^0.16.2 for async actions handling.
 
+## Routing:
+ * React-Router^4.3.1 - React app from the start can be multy-page oriented.
+ * Connected-React-Router^5.0.1 holdes synhromious app Redux and Browser Location states.
+
  ## Styling:
  * Support CSS/SASS style markup.
  * Integrated CSSModules for independent component styling.

diff --git a/package.json b/package.json
@@ -162,6 +162,7 @@
     "browser-sync-webpack-plugin": "^2.2.2",
     "clean-webpack-plugin": "^0.1.19",
     "connect-history-api-fallback": "^1.5.0",
+    "connected-react-router": "^5.0.1",
     "debug": "^4.1.0",
     "history": "^4.7.2",
     "html-loader": "^0.5.5",
@@ -172,9 +173,8 @@
     "prop-types": "^15.6.0",
     "react": "^16.7.0-alpha.0",
     "react-dom": "^16.7.0-alpha.0",
-    "react-redux": "^6.0.0-beta.2",
+    "react-redux": "^5.1.1",
     "react-router-dom": "^4.3.1",
-    "react-router-redux": "^4.0.8",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-saga": "^0.16.2",

diff --git a/src/controller/history.js b/src/controller/history.js
@@ -0,0 +1,5 @@
+import { createBrowserHistory } from 'history';
+
+const history = createBrowserHistory();
+
+export default history;
diff --git a/src/controller/middleware/rootReducer.js b/src/controller/middleware/rootReducer.js
@@ -1,12 +1,14 @@
 import { combineReducers } from 'redux';
-import { routerReducer as routing } from 'react-router-redux';
+import { connectRouter } from 'connected-react-router';
 import common from '../reducers';
+import history from '../history';
 
 const makeRootReducer = asyncReducers => {
   return combineReducers({
     ...asyncReducers,
     common,
-    routing
+    // routing
+    router: connectRouter(history)
   });
 };
 

diff --git a/src/controller/reducers.js b/src/controller/reducers.js
@@ -1,3 +1,4 @@
+import { LOCATION_CHANGE } from 'connected-react-router';
 import { COUNT_ADD, SOME_ASYNC_ACTION } from '../constants';
 import initialState from './initialState';
 
@@ -13,6 +14,10 @@ const ACTION_HANDLERS = {
   [SOME_ASYNC_ACTION]: (state, action) => ({
     ...state,
     ...action.payload
+  }),
+  [LOCATION_CHANGE]: (state, action) => ({
+    ...state,
+    locationChange: action.payload.location.pathname
   })
 };
 

diff --git a/src/controller/store.js b/src/controller/store.js
@@ -1,10 +1,12 @@
 import { applyMiddleware, compose, createStore } from 'redux';
+import { routerMiddleware } from 'connected-react-router';
 import initialState from './initialState';
+import history from './history';
 
 import { logger, makeRootReducer, sagaMiddleware as saga, rootSaga, runSaga } from './middleware';
 
 const rootStore = () => {
-  const middleware = [saga, logger];
+  const middleware = [routerMiddleware(history), saga, logger];
   const enhancers = [];
 
   if (__DEV__ && window.__REDUX_DEVTOOLS_EXTENSION__) {

diff --git a/src/index.js b/src/index.js
@@ -1,14 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import RedBox from 'redbox-react';
-import { syncHistoryWithStore } from 'react-router-redux';
-import createBrowserHistory from 'history/createBrowserHistory';
 
 import store from './controller/store';
+import history from './controller/history';
 import AppContainer from './container/index';
 
-const history = syncHistoryWithStore(createBrowserHistory(), store);
-
 const ENTRY_POINT = document.querySelector('#react-app-root');
 
 // creating starting endpoint for app.

diff --git a/yarn.lock b/yarn.lock
@@ -2907,6 +2907,13 @@ [email protected]:
     parseurl "~1.3.2"
     utils-merge "1.0.1"
 
+connected-react-router@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-5.0.1.tgz#8379854fad7e027b1e27652c00ad534f8ad244b3"
+  dependencies:
+    immutable "^3.8.1"
+    seamless-immutable "^7.1.3"
+
 console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@@ -5167,7 +5174,7 @@ hoist-non-react-statics@^2.5.0:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
 
-hoist-non-react-statics@^3.0.1:
+hoist-non-react-statics@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.1.0.tgz#42414ccdfff019cd2168168be998c7b3bd5245c0"
   dependencies:
@@ -5395,7 +5402,7 @@ ignore@^4.0.0, ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
 
-immutable@^3:
+immutable@^3, immutable@^3.8.1:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
 
@@ -9286,16 +9293,21 @@ react-is@^16.3.2, react-is@^16.6.0:
   version "16.6.3"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
 
-react-redux@^6.0.0-beta.2:
-  version "6.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0-beta.2.tgz#90b8d50ae71d9dc5d413200836d279de64f7c3e2"
+react-lifecycles-compat@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
+react-redux@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.1.tgz#88e368682c7fa80e34e055cd7ac56f5936b0f52f"
   dependencies:
     "@babel/runtime" "^7.1.2"
-    hoist-non-react-statics "^3.0.1"
+    hoist-non-react-statics "^3.1.0"
     invariant "^2.2.4"
     loose-envify "^1.1.0"
-    prop-types "^15.6.2"
+    prop-types "^15.6.1"
     react-is "^16.6.0"
+    react-lifecycles-compat "^3.0.0"
 
 react-router-dom@^4.3.1:
   version "4.3.1"
@@ -9308,10 +9320,6 @@ react-router-dom@^4.3.1:
     react-router "^4.3.1"
     warning "^4.0.1"
 
-react-router-redux@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-4.0.8.tgz#227403596b5151e182377dab835b5d45f0f8054e"
-
 react-router@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
@@ -10016,6 +10024,10 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
+seamless-immutable@^7.1.3:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"