侧栏点击功能

src/contact/contact.js

@@ -1,14 +1,20 @@
 import React, { Component } from 'react';
-import { Provider } from 'react-redux';
+import { Provider,connect } from 'react-redux';
 import { BrowserRouter, Route,Link } from 'react-router-dom';
 import store from './store';
 
 import Client from './client';
+import { actionCreators } from './common/store';
+
+
+class contact extends Component {
 
-class Contact extends Component {
   render() {
+    const { menuActive,handleMenuActive } = this.props;
+     //console.log(this.state);
+    //console.log(store.getIn('common','menuActive'));
     return (
-      <Provider store={store}>
+      // <Provider store={store}>
          
          <BrowserRouter>
           <aside className="page-sidebar">
@@ -26,18 +32,18 @@ class Contact extends Component {
             </div>
             <nav id="js-primary-nav" className="primary-nav" role="navigation">
             
-              <ul id="js-nav-menu" class="nav-menu">
-                <li class="active">
+              <ul id="js-nav-menu" className="nav-menu">
+                <li className={menuActive=='client'?'active':''} onClick={()=>handleMenuActive('client')} >
                   <Link to='/contact'>
-                  <i class="fal fa-address-book"></i>
-                      <span class="nav-link-text">联系人</span>
+                  <i className="fal fa-address-book"></i>
+                      <span className="nav-link-text">联系人 {} </span>
                   </Link>
                   
                 </li>
-                <li class="">
-                  <Link to='/product/lockStatistics'>
-                  <i class="fal fa-building "></i>
-                      <span class="nav-link-text">公司</span>
+                <li className={menuActive=='company'?'active':''} onClick={()=>handleMenuActive('company')}>
+                  <Link to='/contact'>
+                  <i className="fal fa-building "></i>
+                      <span className="nav-link-text">公司</span>
                   </Link>
                 </li>
               </ul>
@@ -52,9 +58,27 @@ class Contact extends Component {
           </div>
             </BrowserRouter>
         
-      </Provider>
+      // </Provider>
     );
   }
+
 }
 
-export default Contact;
+const mapStateToProps = (state) => {
+
+  return {
+    menuActive: state.getIn(['common', 'menuActive']),
+  }
+}
+
+
+const mapDispathToProps = (dispatch) => {
+  return {
+    handleMenuActive(value) {
+      dispatch(actionCreators.menuActive(value));
+    },
+  }
+  
+}
+// export default contact;
+export default connect(mapStateToProps, mapDispathToProps)(contact);

src/contact/index.js

@@ -2,7 +2,18 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Contact from './contact';
 
+import { Provider } from 'react-redux';
+import store from './store';
 //import css from '../../public/css/vendors.bundle.css';
 // require('../public/css/vendors.bundle.css');
 
-ReactDOM.render(<Contact />, document.getElementById('root'));
+const App=(
+<Provider store={store}>
+<Contact />
+</Provider>
+)
+    
+
+
+
+ReactDOM.render(App, document.getElementById('root'));

src/contact/store/reducer.js

@@ -1,8 +1,14 @@
 import { combineReducers } from 'redux-immutable';
 import { reducer as clientReducer } from '../client/store';
+import { reducer as commonReducer } from '../common/store';
+
+
+
 
 const reducer = combineReducers({
-    client: clientReducer
+    common: commonReducer,
+    client: clientReducer,
+
 });
 
 export default reducer;