From ee15c0150d5ba0221c9282bbf93eb7e786fe5679 Mon Sep 17 00:00:00 2001 From: Sanjay Bhangar Date: Sat, 8 Dec 2018 18:01:20 +0200 Subject: [PATCH 1/2] failed attempt at setting up connected router --- package.json | 2 ++ src/App.js | 27 +++++++++++++++++---------- src/history.js | 5 +++++ src/index.js | 5 +---- src/reducers/index.js | 6 +++--- src/store/configureStore.js | 9 +++++++-- yarn.lock | 15 +++++++++++++++ 7 files changed, 50 insertions(+), 19 deletions(-) create mode 100644 src/history.js diff --git a/package.json b/package.json index 2dd6987..72d9477 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { + "connected-react-router": "^5.0.1", + "history": "^4.7.2", "prop-types": "^15.6.2", "react": "^16.6.3", "react-css-grid": "^2.0.0-0", diff --git a/src/App.js b/src/App.js index da4e94d..4a233cd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,12 @@ import React, {Component} from 'react'; import {Provider} from 'react-redux'; +import { ConnectedRouter } from 'connected-react-router' import './App.css'; -import {Route} from 'react-router-dom'; +import { Route, Switch } from 'react-router-dom'; import Home from './containers/Home'; import TopicsList from './containers/TopicsList'; import store from './store/configureStore'; +import history from './history'; import Header from "./components/Header"; import Footer from "./components/Footer"; import Search from "./components/Search"; @@ -13,18 +15,23 @@ import Video from "./containers/Video"; class App extends Component { render() { + console.log('store', history, store); return ( + +
-
-
- - - - -
+
+ + + + + + +
+ ); } diff --git a/src/history.js b/src/history.js new file mode 100644 index 0000000..00f28a3 --- /dev/null +++ b/src/history.js @@ -0,0 +1,5 @@ +import { createBrowserHistory } from 'history'; + +const history = createBrowserHistory(); + +export default history; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 1e219f8..2ae3e9c 100644 --- a/src/index.js +++ b/src/index.js @@ -3,12 +3,9 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; -import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( - - - , + , document.getElementById('root') ); diff --git a/src/reducers/index.js b/src/reducers/index.js index 7c2d74a..b57b0d0 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -2,10 +2,10 @@ import { combineReducers } from 'redux'; import TopicsReducer from './topics'; import VideosReducer from './videos'; +import { connectRouter } from 'connected-react-router' -const rootReducer = combineReducers({ +export default (history) => combineReducers({ + router: connectRouter(history), topics: TopicsReducer, videos: VideosReducer }); - -export default rootReducer; \ No newline at end of file diff --git a/src/store/configureStore.js b/src/store/configureStore.js index 3e1b515..eda8ee7 100644 --- a/src/store/configureStore.js +++ b/src/store/configureStore.js @@ -1,5 +1,7 @@ -import { createStore, applyMiddleware } from 'redux'; +import { createStore, applyMiddleware, compose } from 'redux'; import thunk from 'redux-thunk'; +import history from '../history'; +import { routerMiddleware } from 'connected-react-router' import rootReducer from '../reducers'; import getInitialState from '../utils/get-initial-state'; @@ -8,7 +10,10 @@ const initialState = getInitialState(); const store = createStore( rootReducer, initialState, - applyMiddleware(thunk) + compose( + routerMiddleware(history), + applyMiddleware(thunk) + ) ); export default store; diff --git a/yarn.lock b/yarn.lock index af0e5ed..fe41432 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2004,6 +2004,13 @@ connect-history-api-fallback@^1.3.0: version "1.5.0" resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a" +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" @@ -3950,6 +3957,10 @@ immer@1.7.2: version "1.7.2" resolved "https://registry.yarnpkg.com/immer/-/immer-1.7.2.tgz#a51e9723c50b27e132f6566facbec1c85fc69547" +immutable@^3.8.1: + version "3.8.2" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3" + import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" @@ -7349,6 +7360,10 @@ schema-utils@^1.0.0: ajv-errors "^1.0.0" ajv-keywords "^3.1.0" +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" From 6eb178ea39f8287f88eb950c78054a2ea2f13da0 Mon Sep 17 00:00:00 2001 From: Sanjay Bhangar Date: Sat, 8 Dec 2018 18:27:19 +0200 Subject: [PATCH 2/2] fix connected-react-router --- package.json | 1 + src/store/configureStore.js | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 72d9477..0bb3fec 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "react-css-grid": "^2.0.0-0", "react-dom": "^16.6.3", "react-redux": "^5.1.1", + "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-scripts": "2.1.1", "redux": "^4.0.1", diff --git a/src/store/configureStore.js b/src/store/configureStore.js index eda8ee7..67eb97e 100644 --- a/src/store/configureStore.js +++ b/src/store/configureStore.js @@ -8,11 +8,13 @@ import getInitialState from '../utils/get-initial-state'; const initialState = getInitialState(); const store = createStore( - rootReducer, + rootReducer(history), initialState, compose( - routerMiddleware(history), - applyMiddleware(thunk) + applyMiddleware( + routerMiddleware(history), + thunk + ) ) );