From a2ecf1b87b32d20b0c7a84bf8a2531164b7487f9 Mon Sep 17 00:00:00 2001 From: sviatoslav Date: Fri, 16 Nov 2018 17:45:41 +0200 Subject: [PATCH] added app routing --- CHANGELOG.md | 3 +++ README.md | 4 +++ package.json | 4 +-- src/controller/history.js | 5 ++++ src/controller/middleware/rootReducer.js | 6 +++-- src/controller/reducers.js | 5 ++++ src/controller/store.js | 4 ++- src/index.js | 5 +--- yarn.lock | 34 ++++++++++++++++-------- 9 files changed, 50 insertions(+), 20 deletions(-) create mode 100644 src/controller/history.js diff --git a/CHANGELOG.md b/CHANGELOG.md index f31c1be..4c5e17d 100644 --- 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 index 946a4d3..88223f8 100644 --- 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 index c9058e8..a904ce0 100644 --- 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 new file mode 100644 index 0000000..564e8ec --- /dev/null +++ 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 index 1dfbfb0..0432ec7 100644 --- 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 index 97b6c96..5d7c7eb 100644 --- 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 index 79712e6..a09b6ca 100644 --- 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 index 718ea9f..fbf340b 100644 --- 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 index 6503c46..5579fac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2907,6 +2907,13 @@ connect@3.6.6: 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"