add dva-loading (#587)

package.json

@@ -28,6 +28,7 @@
     "bizcharts-plugin-slider": "^2.0.1",
     "classnames": "^2.2.5",
     "dva": "^2.1.0",
+    "dva-loading": "^1.0.4",
     "enquire-js": "^0.1.1",
     "fastclick": "^1.0.6",
     "lodash": "^4.17.4",

src/index.js

 import '@babel/polyfill';
 import dva from 'dva';
+import createHistory from 'history/createHashHistory';
+import createLoading from 'dva-loading';
 import 'moment/locale/zh-cn';
 import FastClick from 'fastclick';
 import './rollbar';
 import onError from './error';
-// import browserHistory from 'history/createBrowserHistory';
+
 import './index.less';
 // 1. Initialize
 const app = dva({
-  // history: browserHistory(),
+  history: createHistory(),
   onError,
 });
 
 // 2. Plugins
-// app.use({});
+app.use(createLoading());
 
 // 3. Register global model
 app.model(require('./models/global').default);

src/layouts/BasicLayout.js

@@ -220,9 +220,9 @@ class BasicLayout extends React.PureComponent {
   }
 }
 
-export default connect(state => ({
-  currentUser: state.user.currentUser,
-  collapsed: state.global.collapsed,
-  fetchingNotices: state.global.fetchingNotices,
-  notices: state.global.notices,
+export default connect(({ user, global, loading }) => ({
+  currentUser: user.currentUser,
+  collapsed: global.collapsed,
+  fetchingNotices: loading.effects['global/fetchNotices'],
+  notices: global.notices,
 }))(BasicLayout);

src/models/activities.js

@@ -5,24 +5,15 @@ export default {
 
   state: {
     list: [],
-    loading: true,
   },
 
   effects: {
     *fetchList(_, { call, put }) {
-      yield put({
-        type: 'changeLoading',
-        payload: true,
-      });
       const response = yield call(queryActivities);
       yield put({
         type: 'saveList',
         payload: Array.isArray(response) ? response : [],
       });
-      yield put({
-        type: 'changeLoading',
-        payload: false,
-      });
     },
   },
 
@@ -33,11 +24,5 @@ export default {
         list: action.payload,
       };
     },
-    changeLoading(state, action) {
-      return {
-        ...state,
-        loading: action.payload,
-      };
-    },
   },
 };

src/models/chart.js

@@ -19,10 +19,6 @@ export default {
 
   effects: {
     *fetch(_, { call, put }) {
-      yield put({
-        type: 'changeLoading',
-        payload: true,
-      });
       const response = yield call(fakeChartData);
       yield put({
         type: 'save',
@@ -45,7 +41,6 @@ export default {
       return {
         ...state,
         ...payload,
-        loading: false,
       };
     },
     clear() {
@@ -62,11 +57,5 @@ export default {
         radarData: [],
       };
     },
-    changeLoading(state, { payload }) {
-      return {
-        ...state,
-        loading: payload,
-      };
-    },
   },
 };

src/models/form.js

@@ -12,50 +12,23 @@ export default {
       receiverName: 'Alex',
       amount: '500',
     },
-    regularFormSubmitting: false,
-    stepFormSubmitting: false,
-    advancedFormSubmitting: false,
   },
 
   effects: {
-    *submitRegularForm({ payload }, { call, put }) {
-      yield put({
-        type: 'changeRegularFormSubmitting',
-        payload: true,
-      });
+    *submitRegularForm({ payload }, { call }) {
       yield call(fakeSubmitForm, payload);
-      yield put({
-        type: 'changeRegularFormSubmitting',
-        payload: false,
-      });
       message.success('提交成功');
     },
     *submitStepForm({ payload }, { call, put }) {
-      yield put({
-        type: 'changeStepFormSubmitting',
-        payload: true,
-      });
       yield call(fakeSubmitForm, payload);
       yield put({
         type: 'saveStepFormData',
         payload,
       });
-      yield put({
-        type: 'changeStepFormSubmitting',
-        payload: false,
-      });
       yield put(routerRedux.push('/form/step-form/result'));
     },
-    *submitAdvancedForm({ payload }, { call, put }) {
-      yield put({
-        type: 'changeAdvancedFormSubmitting',
-        payload: true,
-      });
+    *submitAdvancedForm({ payload }, { call }) {
       yield call(fakeSubmitForm, payload);
-      yield put({
-        type: 'changeAdvancedFormSubmitting',
-        payload: false,
-      });
       message.success('提交成功');
     },
   },
@@ -70,23 +43,5 @@ export default {
         },
       };
     },
-    changeRegularFormSubmitting(state, { payload }) {
-      return {
-        ...state,
-        regularFormSubmitting: payload,
-      };
-    },
-    changeStepFormSubmitting(state, { payload }) {
-      return {
-        ...state,
-        stepFormSubmitting: payload,
-      };
-    },
-    changeAdvancedFormSubmitting(state, { payload }) {
-      return {
-        ...state,
-        advancedFormSubmitting: payload,
-      };
-    },
   },
 };

src/models/global.js

@@ -6,15 +6,10 @@ export default {
   state: {
     collapsed: false,
     notices: [],
-    fetchingNotices: false,
   },
 
   effects: {
     *fetchNotices(_, { call, put }) {
-      yield put({
-        type: 'changeNoticeLoading',
-        payload: true,
-      });
       const data = yield call(queryNotices);
       yield put({
         type: 'saveNotices',
@@ -49,7 +44,6 @@ export default {
       return {
         ...state,
         notices: payload,
-        fetchingNotices: false,
       };
     },
     saveClearedNotices(state, { payload }) {
@@ -58,12 +52,6 @@ export default {
         notices: state.notices.filter(item => item.type !== payload),
       };
     },
-    changeNoticeLoading(state, { payload }) {
-      return {
-        ...state,
-        fetchingNotices: payload,
-      };
-    },
   },
 
   subscriptions: {

src/models/list.js

@@ -5,39 +5,22 @@ export default {
 
   state: {
     list: [],
-    loading: false,
   },
 
   effects: {
     *fetch({ payload }, { call, put }) {
-      yield put({
-        type: 'changeLoading',
-        payload: true,
-      });
       const response = yield call(queryFakeList, payload);
       yield put({
         type: 'queryList',
         payload: Array.isArray(response) ? response : [],
       });
-      yield put({
-        type: 'changeLoading',
-        payload: false,
-      });
     },
     *appendFetch({ payload }, { call, put }) {
-      yield put({
-        type: 'changeLoading',
-        payload: true,
-      });
       const response = yield call(queryFakeList, payload);
       yield put({
         type: 'appendList',
         payload: Array.isArray(response) ? response : [],
       });
-      yield put({
-        type: 'changeLoading',
-        payload: false,
-      });
     },
   },
 
@@ -54,11 +37,5 @@ export default {
         list: state.list.concat(action.payload),
       };
     },
-    changeLoading(state, action) {
-      return {
-        ...state,
-        loading: action.payload,
-      };
-    },
   },
 };

src/models/login.js

@@ -10,10 +10,6 @@ export default {
 
   effects: {
     *login({ payload }, { call, put }) {
-      yield put({
-        type: 'changeSubmitting',
-        payload: true,
-      });
       const response = yield call(fakeAccountLogin, payload);
       yield put({
         type: 'changeLoginStatus',
@@ -50,13 +46,6 @@ export default {
         ...state,
         status: payload.status,
         type: payload.type,
-        submitting: false,
-      };
-    },
-    changeSubmitting(state, { payload }) {
-      return {
-        ...state,
-        submitting: payload,
       };
     },
   },

src/models/profile.js

@@ -5,43 +5,25 @@ export default {
 
   state: {
     basicGoods: [],
-    basicLoading: true,
     advancedOperation1: [],
     advancedOperation2: [],
     advancedOperation3: [],
-    advancedLoading: true,
   },
 
   effects: {
     *fetchBasic(_, { call, put }) {
-      yield put({
-        type: 'changeLoading',
-        payload: { basicLoading: true },
-      });
       const response = yield call(queryBasicProfile);
       yield put({
         type: 'show',
         payload: response,
       });
-      yield put({
-        type: 'changeLoading',
-        payload: { basicLoading: false },
-      });
     },
     *fetchAdvanced(_, { call, put }) {
-      yield put({
-        type: 'changeLoading',
-        payload: { advancedLoading: true },
-      });
       const response = yield call(queryAdvancedProfile);
       yield put({
         type: 'show',
         payload: response,
       });
-      yield put({
-        type: 'changeLoading',
-        payload: { advancedLoading: false },
-      });
     },
   },
 
@@ -52,11 +34,5 @@ export default {
         ...payload,
       };
     },
-    changeLoading(state, { payload }) {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
   },
 };

src/models/project.js

@@ -5,24 +5,15 @@ export default {
 
   state: {
     notice: [],
-    loading: true,
   },
 
   effects: {
     *fetchNotice(_, { call, put }) {
-      yield put({
-        type: 'changeLoading',
-        payload: true,
-      });
       const response = yield call(queryProjectNotice);
       yield put({
         type: 'saveNotice',
         payload: Array.isArray(response) ? response : [],
       });
-      yield put({
-        type: 'changeLoading',
-        payload: false,
-      });
     },
   },
 
@@ -33,11 +24,5 @@ export default {
         notice: action.payload,
       };
     },
-    changeLoading(state, action) {
-      return {
-        ...state,
-        loading: action.payload,
-      };
-    },
   },
 };

src/models/register.js

@@ -9,19 +9,11 @@ export default {
 
   effects: {
     *submit(_, { call, put }) {
-      yield put({
-        type: 'changeSubmitting',
-        payload: true,
-      });
       const response = yield call(fakeRegister);
       yield put({
         type: 'registerHandle',
         payload: response,
       });
-      yield put({
-        type: 'changeSubmitting',
-        payload: false,
-      });
     },
   },
 
@@ -32,11 +24,5 @@ export default {
         status: payload.status,
       };
     },
-    changeSubmitting(state, { payload }) {
-      return {
-        ...state,
-        submitting: payload,
-      };
-    },
   },
 };

src/models/rule.js

@@ -8,57 +8,30 @@ export default {
       list: [],
       pagination: {},
     },
-    loading: true,
   },
 
   effects: {
     *fetch({ payload }, { call, put }) {
-      yield put({
-        type: 'changeLoading',
-        payload: true,
-      });
       const response = yield call(queryRule, payload);
       yield put({
         type: 'save',
         payload: response,
       });
-      yield put({
-        type: 'changeLoading',
-        payload: false,
-      });
     },
     *add({ payload, callback }, { call, put }) {
-      yield put({
-        type: 'changeLoading',
-        payload: true,
-      });
       const response = yield call(addRule, payload);
       yield put({
         type: 'save',
         payload: response,
       });
-      yield put({
-        type: 'changeLoading',
-        payload: false,
-      });
-
       if (callback) callback();
     },
     *remove({ payload, callback }, { call, put }) {
-      yield put({
-        type: 'changeLoading',
-        payload: true,
-      });
       const response = yield call(removeRule, payload);
       yield put({
         type: 'save',
         payload: response,
       });
-      yield put({
-        type: 'changeLoading',
-        payload: false,
-      });
-
       if (callback) callback();
     },
   },
@@ -70,11 +43,5 @@ export default {
         data: action.payload,
       };
     },
-    changeLoading(state, action) {
-      return {
-        ...state,
-        loading: action.payload,
-      };
-    },
   },
 };

src/models/user.js

@@ -5,25 +5,16 @@ export default {
 
   state: {
     list: [],
-    loading: false,
     currentUser: {},
   },
 
   effects: {
     *fetch(_, { call, put }) {
-      yield put({
-        type: 'changeLoading',
-        payload: true,
-      });
       const response = yield call(queryUsers);
       yield put({
         type: 'save',
         payload: response,
       });
-      yield put({
-        type: 'changeLoading',
-        payload: false,
-      });
     },
     *fetchCurrent(_, { call, put }) {
       const response = yield call(queryCurrent);
@@ -41,12 +32,6 @@ export default {
         list: action.payload,
       };
     },
-    changeLoading(state, action) {
-      return {
-        ...state,
-        loading: action.payload,
-      };
-    },
     saveCurrentUser(state, action) {
       return {
         ...state,

src/routes/Dashboard.js

@@ -37,7 +37,7 @@ class Dashboard extends PureComponent {
     });
   }
   render() {
-    const { user: { list, loading } } = this.props;
+    const { user: { list }, loading } = this.props;
     return (
       <div>
         <Row gutter={24}>
@@ -95,6 +95,7 @@ class Dashboard extends PureComponent {
   }
 }
 
-export default connect(state => ({
-  user: state.user,
+export default connect(({ user, loading }) => ({
+  user,
+  loading: loading.effects['user/fetch'],
 }))(Dashboard);

src/routes/Dashboard/Analysis.js

@@ -42,8 +42,9 @@ for (let i = 0; i < 7; i += 1) {
   });
 }
 
-@connect(state => ({
-  chart: state.chart,
+@connect(({ chart, loading }) => ({
+  chart,
+  loading: loading.effects['chart/fetch'],
 }))
 export default class Analysis extends Component {
   state = {
@@ -113,7 +114,7 @@ export default class Analysis extends Component {
 
   render() {
     const { rangePickerValue, salesType, currentTabKey } = this.state;
-    const { chart } = this.props;
+    const { chart, loading } = this.props;
     const {
       visitData,
       visitData2,
@@ -124,7 +125,6 @@ export default class Analysis extends Component {
       salesTypeData,
       salesTypeDataOnline,
       salesTypeDataOffline,
-      loading,
     } = chart;
 
     const salesPieData =

src/routes/Dashboard/Monitor.js

@@ -14,8 +14,9 @@ const { Secured } = Authorized;
 const targetTime = new Date().getTime() + 3900000;
 
 @Secured('admin')
-@connect(state => ({
-  monitor: state.monitor,
+@connect(({ monitor, loading }) => ({
+  monitor,
+  loading: loading.models.monitor,
 }))
 export default class Monitor extends PureComponent {
   componentDidMount() {
@@ -25,7 +26,7 @@ export default class Monitor extends PureComponent {
   }
 
   render() {
-    const { monitor } = this.props;
+    const { monitor, loading } = this.props;
     const { tags } = monitor;
 
     return (
@@ -142,7 +143,7 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
           <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
-            <Card title="热门搜索" bordered={false} bodyStyle={{ overflow: 'hidden' }}>
+            <Card title="热门搜索" loading={loading} bordered={false} bodyStyle={{ overflow: 'hidden' }}>
               <TagCloud
                 data={tags}
                 height={161}

src/routes/Dashboard/Workplace.js

@@ -70,10 +70,12 @@ const members = [
   },
 ];
 
-@connect(state => ({
-  project: state.project,
-  activities: state.activities,
-  chart: state.chart,
+@connect(({ project, activities, chart, loading }) => ({
+  project,
+  activities,
+  chart,
+  projectLoading: loading.effects['project/fetchNotice'],
+  activitiesLoading: loading.effects['activities/fetchList'],
 }))
 export default class Workplace extends PureComponent {
   componentDidMount() {
@@ -131,8 +133,9 @@ export default class Workplace extends PureComponent {
 
   render() {
     const {
-      project: { loading: projectLoading, notice },
-      activities: { loading: activitiesLoading },
+      project: { notice },
+      projectLoading,
+      activitiesLoading,
       chart: { radarData },
     } = this.props;
 

src/routes/Forms/AdvancedForm.js

@@ -284,7 +284,7 @@ class AdvancedForm extends PureComponent {
   }
 }
 
-export default connect(state => ({
-  collapsed: state.global.collapsed,
-  submitting: state.form.advancedFormSubmitting,
+export default connect(({ global, loading }) => ({
+  collapsed: global.collapsed,
+  submitting: loading.effects['form/submitAdvancedForm'],
 }))(Form.create()(AdvancedForm));

src/routes/Forms/BasicForm.js

@@ -11,8 +11,8 @@ const { Option } = Select;
 const { RangePicker } = DatePicker;
 const { TextArea } = Input;
 
-@connect(state => ({
-  submitting: state.form.regularFormSubmitting,
+@connect(({ loading }) => ({
+  submitting: loading.effects['form/submitRegularForm'],
 }))
 @Form.create()
 export default class BasicForms extends PureComponent {

src/routes/Forms/StepForm/Step2.js

@@ -108,7 +108,7 @@ class Step2 extends React.PureComponent {
   }
 }
 
-export default connect(({ form }) => ({
-  submitting: form.stepFormSubmitting,
+export default connect(({ form, loading }) => ({
+  submitting: loading.effects['form/submitStepForm'],
   data: form.step,
 }))(Step2);

src/routes/List/Applications.js

@@ -25,8 +25,9 @@ const formatWan = (val) => {
 
 /* eslint react/no-array-index-key: 0 */
 @Form.create()
-@connect(state => ({
-  list: state.list,
+@connect(({ list, loading }) => ({
+  list,
+  loading: loading.models.list,
 }))
 export default class FilterCardList extends PureComponent {
   componentDidMount() {
@@ -57,7 +58,7 @@ export default class FilterCardList extends PureComponent {
   }
 
   render() {
-    const { list: { list, loading }, form } = this.props;
+    const { list: { list }, loading, form } = this.props;
     const { getFieldDecorator } = form;
 
     const CardInfo = ({ activeUser, newUser }) => (

src/routes/List/Articles.js

@@ -13,8 +13,9 @@ const FormItem = Form.Item;
 const pageSize = 5;
 
 @Form.create()
-@connect(state => ({
-  list: state.list,
+@connect(({ list, loading }) => ({
+  list,
+  loading: loading.models.list,
 }))
 export default class SearchList extends Component {
   componentDidMount() {
@@ -38,7 +39,7 @@ export default class SearchList extends Component {
   }
 
   render() {
-    const { form, list: { list, loading } } = this.props;
+    const { form, list: { list }, loading } = this.props;
     const { getFieldDecorator } = form;
 
     const owners = [

src/routes/List/BasicList.js

@@ -11,8 +11,9 @@ const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
 const { Search } = Input;
 
-@connect(state => ({
-  list: state.list,
+@connect(({ list, loading }) => ({
+  list,
+  loading: loading.models.list,
 }))
 export default class BasicList extends PureComponent {
   componentDidMount() {
@@ -25,7 +26,7 @@ export default class BasicList extends PureComponent {
   }
 
   render() {
-    const { list: { list, loading } } = this.props;
+    const { list: { list }, loading } = this.props;
 
     const Info = ({ title, value, bordered }) => (
       <div className={styles.headerInfo}>

src/routes/List/CardList.js

@@ -7,8 +7,9 @@ import Ellipsis from '../../components/Ellipsis';
 
 import styles from './CardList.less';
 
-@connect(state => ({
-  list: state.list,
+@connect(({ list, loading }) => ({
+  list,
+  loading: loading.models.list,
 }))
 export default class CardList extends PureComponent {
   componentDidMount() {
@@ -21,7 +22,7 @@ export default class CardList extends PureComponent {
   }
 
   render() {
-    const { list: { list, loading } } = this.props;
+    const { list: { list }, loading } = this.props;
 
     const content = (
       <div className={styles.pageHeaderContent}>

src/routes/List/Projects.js

@@ -14,8 +14,9 @@ const FormItem = Form.Item;
 
 /* eslint react/no-array-index-key: 0 */
 @Form.create()
-@connect(state => ({
-  list: state.list,
+@connect(({ list, loading }) => ({
+  list,
+  loading: loading.models.list,
 }))
 export default class CoverCardList extends PureComponent {
   componentDidMount() {
@@ -46,7 +47,7 @@ export default class CoverCardList extends PureComponent {
   }
 
   render() {
-    const { list: { list = [], loading }, form } = this.props;
+    const { list: { list = [] }, loading, form } = this.props;
     const { getFieldDecorator } = form;
 
     const cardList = list ? (

src/routes/List/TableList.js

@@ -10,8 +10,9 @@ const FormItem = Form.Item;
 const { Option } = Select;
 const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
 
-@connect(state => ({
-  rule: state.rule,
+@connect(({ rule, loading }) => ({
+  rule,
+  loading: loading.models.rule,
 }))
 @Form.create()
 export default class TableList extends PureComponent {
@@ -268,7 +269,7 @@ export default class TableList extends PureComponent {
   }
 
   render() {
-    const { rule: { loading: ruleLoading, data } } = this.props;
+    const { rule: { data }, loading } = this.props;
     const { selectedRows, modalVisible, addInputValue } = this.state;
 
     const menu = (
@@ -304,7 +305,7 @@ export default class TableList extends PureComponent {
             </div>
             <StandardTable
               selectedRows={selectedRows}
-              loading={ruleLoading}
+              loading={loading}
               data={data}
               onSelectRow={this.handleSelectRows}
               onChange={this.handleStandardTableChange}

src/routes/Profile/AdvancedProfile.js

@@ -139,8 +139,9 @@ const columns = [{
   key: 'memo',
 }];
 
-@connect(state => ({
-  profile: state.profile,
+@connect(({ profile, loading }) => ({
+  profile,
+  loading: loading.effects['profile/fetchAdvanced'],
 }))
 export default class AdvancedProfile extends Component {
   state = {
@@ -185,24 +186,24 @@ export default class AdvancedProfile extends Component {
 
   render() {
     const { stepDirection } = this.state;
-    const { profile } = this.props;
-    const { advancedLoading, advancedOperation1, advancedOperation2, advancedOperation3 } = profile;
+    const { profile, loading } = this.props;
+    const { advancedOperation1, advancedOperation2, advancedOperation3 } = profile;
     const contentList = {
       tab1: <Table
         pagination={false}
-        loading={advancedLoading}
+        loading={loading}
         dataSource={advancedOperation1}
         columns={columns}
       />,
       tab2: <Table
         pagination={false}
-        loading={advancedLoading}
+        loading={loading}
         dataSource={advancedOperation2}
         columns={columns}
       />,
       tab3: <Table
         pagination={false}
-        loading={advancedLoading}
+        loading={loading}
         dataSource={advancedOperation3}
         columns={columns}
       />,

src/routes/Profile/BasicProfile.js

@@ -32,8 +32,9 @@ const progressColumns = [{
   key: 'cost',
 }];
 
-@connect(state => ({
-  profile: state.profile,
+@connect(({ profile, loading }) => ({
+  profile,
+  loading: loading.effects['profile/fetchBasic'],
 }))
 export default class BasicProfile extends Component {
   componentDidMount() {
@@ -44,8 +45,8 @@ export default class BasicProfile extends Component {
   }
 
   render() {
-    const { profile } = this.props;
-    const { basicGoods, basicProgress, basicLoading } = profile;
+    const { profile, loading } = this.props;
+    const { basicGoods, basicProgress } = profile;
     let goodsData = [];
     if (basicGoods.length) {
       let num = 0;
@@ -146,7 +147,7 @@ export default class BasicProfile extends Component {
           <Table
             style={{ marginBottom: 24 }}
             pagination={false}
-            loading={basicLoading}
+            loading={loading}
             dataSource={goodsData}
             columns={goodsColumns}
             rowKey="id"
@@ -155,7 +156,7 @@ export default class BasicProfile extends Component {
           <Table
             style={{ marginBottom: 16 }}
             pagination={false}
-            loading={basicLoading}
+            loading={loading}
             dataSource={basicProgress}
             columns={progressColumns}
           />

src/routes/User/Login.js

@@ -7,8 +7,9 @@ import styles from './Login.less';
 
 const { Tab, UserName, Password, Mobile, Captcha, Submit } = Login;
 
-@connect(state => ({
-  login: state.login,
+@connect(({ login, loading }) => ({
+  login,
+  submitting: loading.effects['login/login'],
 }))
 export default class LoginPage extends Component {
   state = {
@@ -46,7 +47,7 @@ export default class LoginPage extends Component {
   }
 
   render() {
-    const { login } = this.props;
+    const { login, submitting } = this.props;
     const { type } = this.state;
     return (
       <div className={styles.main}>
@@ -79,7 +80,7 @@ export default class LoginPage extends Component {
             <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>自动登录</Checkbox>
             <a style={{ float: 'right' }} href="">忘记密码</a>
           </div>
-          <Submit loading={login.submitting}>登录</Submit>
+          <Submit loading={submitting}>登录</Submit>
           <div className={styles.other}>
             其他登录方式
             <Icon className={styles.icon} type="alipay-circle" />

src/routes/User/Register.js

@@ -20,8 +20,9 @@ const passwordProgressMap = {
   pool: 'exception',
 };
 
-@connect(state => ({
-  register: state.register,
+@connect(({ register, loading }) => ({
+  register,
+  submitting: loading.effects['register/submit'],
 }))
 @Form.create()
 export default class Register extends Component {
@@ -148,7 +149,7 @@ export default class Register extends Component {
   };
 
   render() {
-    const { form, register } = this.props;
+    const { form, submitting } = this.props;
     const { getFieldDecorator } = form;
     const { count, prefix } = this.state;
     return (
@@ -270,7 +271,7 @@ export default class Register extends Component {
           <FormItem>
             <Button
               size="large"
-              loading={register.submitting}
+              loading={submitting}
               className={styles.submit}
               type="primary"
               htmlType="submit"