From 2fb922d8be8b8446e642d59e4649ce3a10f31a34 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 29 Dec 2017 15:32:48 +0800 Subject: [PATCH] take dispatch outside the component, close #528 --- src/components/GlobalHeader/index.js | 55 +++++++--------------------- src/components/SiderMenu/index.js | 51 ++++++++------------------ src/layouts/BasicLayout.js | 44 +++++++++++++++++++--- 3 files changed, 68 insertions(+), 82 deletions(-) diff --git a/src/components/GlobalHeader/index.js b/src/components/GlobalHeader/index.js index 6e39d2f8..222002c2 100644 --- a/src/components/GlobalHeader/index.js +++ b/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; - this.props.dispatch({ - type: 'global/changeLayoutCollapsed', - payload: !collapsed, - }); + const { collapsed, onCollapse } = this.props; + onCollapse(!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 = ( - + 个人中心 设置 @@ -98,10 +69,12 @@ export default class GlobalHeader extends PureComponent { return (
{isMobile && ( - [( - - logo - ), + [ + ( + + logo + + ), , ] )} @@ -128,8 +101,8 @@ export default class GlobalHeader extends PureComponent { onItemClick={(item, tabProps) => { console.log(item, tabProps); // eslint-disable-line }} - onClear={this.handleNoticeClear} - onPopupVisibleChange={this.handleNoticeVisibleChange} + onClear={onNoticeClear} + onPopupVisibleChange={onNoticeVisibleChange} loading={fetchingNotices} popupAlign={{ offset: [20, -16] }} > diff --git a/src/components/SiderMenu/index.js b/src/components/SiderMenu/index.js index f8278fc1..70b3e474 100644 --- a/src/components/SiderMenu/index.js +++ b/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 { - onCollapse = (collapsed) => { - this.props.dispatch({ - type: 'global/changeLayoutCollapsed', - payload: collapsed, - }); - } - - render() { - const { collapsed, isMobile } = this.props; - return isMobile ? ( - { this.onCollapse(true); }} - width="256px" - > - - - ) : ( - - ); - } -} +export default props => ( + props.isMobile ? ( + { props.onCollapse(true); }} + width="256px" + > + + + ) : +); diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 959225a2..429431d4 100644 --- a/src/layouts/BasicLayout.js +++ b/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 = (
-- GitLab