Wired redux

package.json

@@ -41,6 +41,7 @@
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.2.2",
     "reactstrap": "^6.0.1",
+    "redux": "^4.0.0",
     "resolve": "1.6.0",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",

src/App.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import './App.scss';
 import { Route, Switch } from 'react-router-dom';
+import './App.scss';
 import Home from './common/Home';
 import MainHeader from './common/MainHeader';
+import MenuLayout from './common/MenuLayout';
 import CreateServer from './servers/CreateServer';
 
 export default class App extends React.Component {
@@ -10,10 +11,12 @@ export default class App extends React.Component {
     return (
       <div>
         <MainHeader/>
+
         <div className="app">
           <Switch>
-            <Route path="/server/create" component={CreateServer} />
+            <Route exact path="/server/create" component={CreateServer} />
-            <Route path="/" component={Home} />
+            <Route exact path="/" component={Home} />
+            <Route component={MenuLayout} />
           </Switch>
         </div>
       </div>

src/common/MainHeader.js

@@ -12,7 +12,7 @@ export default class MainHeader extends React.Component {
     super(props);
 
     this.state = {
-      isOpen: false
+      isOpen: false,
     };
   }
 

src/common/MenuLayout.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Switch } from 'react-router-dom';
+
+export default () => {
+  return (
+    <div>
+      <nav>Left menu</nav>
+      <Switch>
+
+      </Switch>
+    </div>
+  );
+}

src/index.js

@@ -1,15 +1,23 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import 'bootstrap/dist/css/bootstrap.min.css';
+import { Provider } from 'react-redux';
-import './index.scss';
 import { BrowserRouter } from 'react-router-dom';
+import { applyMiddleware, createStore } from 'redux';
 import App from './App';
+import './index.scss';
+import reducers from './reducers';
 import registerServiceWorker from './registerServiceWorker';
 
+// const store = createStore(reducers, {}, applyMiddleware());
+const store = createStore(reducers, applyMiddleware());
+
 ReactDOM.render(
-  <BrowserRouter>
+  <Provider store={store}>
-    <App />
+    <BrowserRouter>
-  </BrowserRouter>,
+      <App />
+    </BrowserRouter>
+  </Provider>,
   document.getElementById('root')
 );
 registerServiceWorker();

src/reducers/index.js

@@ -0,0 +1,5 @@
+import { combineReducers } from 'redux';
+
+const rootReducer = combineReducers({});
+
+export default rootReducer;

src/servers/ServersDropdown.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+import { connect } from 'react-redux';
 
-export default class ServersDropdown extends React.Component {
+class ServersDropdown extends React.Component {
   render() {
     return (
       <UncontrolledDropdown nav>
@@ -21,3 +22,5 @@ export default class ServersDropdown extends React.Component {
     );
   }
 }
+
+export default connect()(ServersDropdown);