add: dva-loading

README.md

@@ -29,12 +29,13 @@
 - [x] 扩展UI组件
  - [x] Ico
  - [x] Search
+ - [x] dropOption
 - [ ] 数据可视化页面
 - [ ] 模拟消息收发
 
 
 - [ ] 升级dva-cli
-- [ ] 加入dva-loading
+- [x] 加入dva-loading
 - [ ] 规范代码，目前代码遵循[standardjs](http://standardjs.com/demo.html)
 
 ## 开发及构建

src/index.js

@@ -1,10 +1,12 @@
 import './index.html'
 import 'babel-polyfill'
 import dva from 'dva'
+import createLoading from 'dva-loading'
 import { browserHistory } from 'dva/router'
 
 // 1. Initialize
 const app = dva({
+  ...createLoading(),
   history: browserHistory,
   onError (error) {
     console.error('app onError -- ', error)

src/models/app.js

@@ -5,7 +5,6 @@ export default {
   namespace: 'app',
   state: {
     login: false,
-    loading: false,
     user: {
       name: '吴彦祖'
     },
@@ -131,18 +130,6 @@ export default {
         loginButtonLoading: true
       }
     },
-    showLoading (state) {
-      return {
-        ...state,
-        loading: true
-      }
-    },
-    hideLoading (state) {
-      return {
-        ...state,
-        loading: false
-      }
-    },
     handleSwitchSider (state) {
       localStorage.setItem('antdAdminSiderFold', !state.siderFold)
       return {

src/models/users.js

@@ -7,7 +7,6 @@ export default {
 
   state: {
     list: [],
-    loading: false,
     currentItem: {},
     modalVisible: false,
     modalType: 'create',
@@ -36,7 +35,6 @@ export default {
 
   effects: {
     *query ({ payload }, { call, put }) {
-      yield put({ type: 'showLoading' })
       const data = yield call(query, parse(payload))
       if (data) {
         yield put({
@@ -49,7 +47,6 @@ export default {
       }
     },
     *'delete' ({ payload }, { call, put }) {
-      yield put({ type: 'showLoading' })
       const data = yield call(remove, { id: payload })
       if (data && data.success) {
         yield put({
@@ -66,7 +63,6 @@ export default {
     },
     *create ({ payload }, { call, put }) {
       yield put({ type: 'hideModal' })
-      yield put({ type: 'showLoading' })
       const data = yield call(create, payload)
       if (data && data.success) {
         yield put({
@@ -83,7 +79,6 @@ export default {
     },
     *update ({ payload }, { select, call, put }) {
       yield put({ type: 'hideModal' })
-      yield put({ type: 'showLoading' })
       const id = yield select(({ users }) => users.currentItem.id)
       const newUser = { ...payload, id }
       const data = yield call(update, newUser)
@@ -110,14 +105,10 @@ export default {
   },
 
   reducers: {
-    showLoading (state) {
-      return { ...state, loading: true }
-    },
     querySuccess (state, action) {
       const {list, pagination} = action.payload
       return { ...state,
         list,
-        loading: false,
         pagination: {
           ...state.pagination,
           ...pagination

src/routes/app.js

@@ -10,8 +10,8 @@ import { Spin } from 'antd'
 import { classnames } from '../utils'
 import '../components/layout/common.less'
 
-function App ({children, location, dispatch, app}) {
-  const {login, loading, loginButtonLoading, user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys} = app
+function App ({children, location, dispatch, app, loading}) {
+  const {login, loginButtonLoading, user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys} = app
   const loginProps = {
     loading,
     loginButtonLoading,
@@ -84,4 +84,4 @@ App.propTypes = {
   app: PropTypes.object
 }
 
-export default connect(({app}) => ({app}))(App)
+export default connect(({app, loading}) => ({app, loading: loading.models.app}))(App)

src/routes/users.js

@@ -5,8 +5,8 @@ import UserList from '../components/users/list'
 import UserSearch from '../components/users/search'
 import UserModal from '../components/users/modal'
 
-function Users ({ location, dispatch, users }) {
-  const { loading, list, pagination, currentItem, modalVisible, modalType, isMotion } = users
+function Users ({ location, dispatch, users, loading }) {
+  const { list, pagination, currentItem, modalVisible, modalType, isMotion } = users
   const { field, keyword } = location.query
 
   const userModalProps = {
@@ -106,4 +106,4 @@ Users.propTypes = {
   dispatch: PropTypes.func
 }
 
-export default connect(({users}) => ({users}))(Users)
+export default connect(({users, loading}) => ({users, loading: loading.models.user}))(Users)