take dispatch outside the component, close #528

src/components/GlobalHeader/index.js

@@ -1,22 +1,16 @@
 import React, { PureComponent } from 'react';
-import { Layout, Menu, Icon, Spin, Tag, Dropdown, Avatar, message, Divider } from 'antd';
+import { Layout, Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider } from 'antd';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
 import Debounce from 'lodash-decorators/debounce';
 import { Link } from 'dva/router';
 import NoticeIcon from '../../components/NoticeIcon';
 import HeaderSearch from '../../components/HeaderSearch';
-import logo from '../../assets/logo.svg';
 import styles from './index.less';
 
 const { Header } = Layout;
 
 export default class GlobalHeader extends PureComponent {
-  componentDidMount() {
-    this.props.dispatch({
-      type: 'user/fetchCurrent',
-    });
-  }
   componentWillUnmount() {
     this.triggerResizeEvent.cancel();
   }
@@ -47,33 +41,9 @@ export default class GlobalHeader extends PureComponent {
     });
     return groupBy(newNotices, 'type');
   }
-  handleNoticeClear = (type) => {
-    message.success(`清空了${type}`);
-    this.props.dispatch({
-      type: 'global/clearNotices',
-      payload: type,
-    });
-  }
-  handleNoticeVisibleChange = (visible) => {
-    if (visible) {
-      this.props.dispatch({
-        type: 'global/fetchNotices',
-      });
-    }
-  }
-  handleMenuClick = ({ key }) => {
-    if (key === 'logout') {
-      this.props.dispatch({
-        type: 'login/logout',
-      });
-    }
-  }
   toggle = () => {
-    const { collapsed } = this.props;
+    const { collapsed, onCollapse } = this.props;
-    this.props.dispatch({
+    onCollapse(!collapsed);
-      type: 'global/changeLayoutCollapsed',
-      payload: !collapsed,
-    });
     this.triggerResizeEvent();
   }
   @Debounce(600)
@@ -84,10 +54,11 @@ export default class GlobalHeader extends PureComponent {
   }
   render() {
     const {
-      currentUser, collapsed, fetchingNotices, isMobile,
+      currentUser, collapsed, fetchingNotices, isMobile, logo,
+      onNoticeVisibleChange, onMenuClick, onNoticeClear,
     } = this.props;
     const menu = (
-      <Menu className={styles.menu} selectedKeys={[]} onClick={this.handleMenuClick}>
+      <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
         <Menu.Item disabled><Icon type="user" />个人中心</Menu.Item>
         <Menu.Item disabled><Icon type="setting" />设置</Menu.Item>
         <Menu.Divider />
@@ -98,10 +69,12 @@ export default class GlobalHeader extends PureComponent {
     return (
       <Header className={styles.header}>
         {isMobile && (
-          [(
+          [
-            <Link to="/" className={styles.logo} key="logo">
+            (
-              <img src={logo} alt="logo" width="32" />
+              <Link to="/" className={styles.logo} key="logo">
-            </Link>),
+                <img src={logo} alt="logo" width="32" />
+              </Link>
+            ),
             <Divider type="vertical" key="line" />,
           ]
         )}
@@ -128,8 +101,8 @@ export default class GlobalHeader extends PureComponent {
             onItemClick={(item, tabProps) => {
               console.log(item, tabProps); // eslint-disable-line
             }}
-            onClear={this.handleNoticeClear}
+            onClear={onNoticeClear}
-            onPopupVisibleChange={this.handleNoticeVisibleChange}
+            onPopupVisibleChange={onNoticeVisibleChange}
             loading={fetchingNotices}
             popupAlign={{ offset: [20, -16] }}
           >

src/components/SiderMenu/index.js

@@ -1,40 +1,19 @@
 import 'rc-drawer-menu/assets/index.css';
-import React, { PureComponent } from 'react';
+import React from 'react';
 import DrawerMenu from 'rc-drawer-menu';
 import SiderMenu from './SiderMenu';
 
-export default class Index extends PureComponent {
+export default props => (
-  onCollapse = (collapsed) => {
+  props.isMobile ? (
-    this.props.dispatch({
+    <DrawerMenu
-      type: 'global/changeLayoutCollapsed',
+      parent={null}
-      payload: collapsed,
+      level={null}
-    });
+      iconChild={null}
-  }
+      open={!props.collapsed}
-
+      onMaskClick={() => { props.onCollapse(true); }}
-  render() {
+      width="256px"
-    const { collapsed, isMobile } = this.props;
+    >
-    return isMobile ? (
+      <SiderMenu {...props} collapsed={props.isMobile ? false : props.collapsed} />
-      <DrawerMenu
+    </DrawerMenu>
-        parent={null}
+  ) : <SiderMenu {...props} />
-        level={null}
+);
-        iconChild={null}
-        open={!collapsed}
-        onMaskClick={() => { this.onCollapse(true); }}
-        width="256px"
-      >
-        <SiderMenu
-          {...this.props}
-          isMobile={isMobile}
-          onCollapse={this.onCollapse}
-          collapsed={isMobile ? false : collapsed}
-        />
-      </DrawerMenu>
-    ) : (
-      <SiderMenu
-        {...this.props}
-        isMobile={isMobile}
-        onCollapse={this.onCollapse}
-      />
-    );
-  }
-}

src/layouts/BasicLayout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Layout, Icon } from 'antd';
+import { Layout, Icon, message } from 'antd';
 import DocumentTitle from 'react-document-title';
 import { connect } from 'dva';
 import { Route, Redirect, Switch } from 'dva/router';
@@ -13,7 +13,7 @@ import SiderMenu from '../components/SiderMenu';
 import NotFound from '../routes/Exception/404';
 import { getRoutes } from '../utils/utils';
 import { getMenuData } from '../common/menu';
-
+import logo from '../assets/logo.svg';
 
 /**
  * 根据菜单取得重定向地址.
@@ -82,6 +82,9 @@ class BasicLayout extends React.PureComponent {
         isMobile: mobile,
       });
     });
+    this.props.dispatch({
+      type: 'user/fetchCurrent',
+    });
   }
   getPageTitle() {
     const { routerData, location } = this.props;
@@ -92,26 +95,57 @@ class BasicLayout extends React.PureComponent {
     }
     return title;
   }
+  handleMenuCollapse = (collapsed) => {
+    this.props.dispatch({
+      type: 'global/changeLayoutCollapsed',
+      payload: collapsed,
+    });
+  }
+  handleNoticeClear = (type) => {
+    message.success(`清空了${type}`);
+    this.props.dispatch({
+      type: 'global/clearNotices',
+      payload: type,
+    });
+  }
+  handleMenuClick = ({ key }) => {
+    if (key === 'logout') {
+      this.props.dispatch({
+        type: 'login/logout',
+      });
+    }
+  }
+  handleNoticeVisibleChange = (visible) => {
+    if (visible) {
+      this.props.dispatch({
+        type: 'global/fetchNotices',
+      });
+    }
+  }
   render() {
     const {
-      currentUser, collapsed, fetchingNotices, notices, routerData, match, location, dispatch,
+      currentUser, collapsed, fetchingNotices, notices, routerData, match, location,
     } = this.props;
     const layout = (
       <Layout>
         <SiderMenu
           collapsed={collapsed}
           location={location}
-          dispatch={dispatch}
           isMobile={this.state.isMobile}
+          onCollapse={this.handleMenuCollapse}
         />
         <Layout>
           <GlobalHeader
+            logo={logo}
             currentUser={currentUser}
             fetchingNotices={fetchingNotices}
             notices={notices}
             collapsed={collapsed}
-            dispatch={dispatch}
             isMobile={this.state.isMobile}
+            onNoticeClear={this.handleNoticeClear}
+            onCollapse={this.handleMenuCollapse}
+            onMenuClick={this.handleMenuClick}
+            onNoticeVisibleChange={this.handleNoticeVisibleChange}
           />
           <Content style={{ margin: '24px 24px 0', height: '100%' }}>
             <div style={{ minHeight: 'calc(100vh - 260px)' }}>