2345678

zhongzhenlong · zhongzhenlong · commit fe8d1eff763a · 2017-07-31T17:45:53.000+08:00
diff --git a/src/main.js b/src/main.js
@@ -1,17 +1,10 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
-import { browserHistory } from 'react-router'
-import { syncHistoryWithStore } from 'react-router-redux'
 import 'babel-polyfill'
-import store from './redux'
+import redux from './redux'
 import Routers from './router'
 import appActions from './redux/actions/app'
-/*
- 这个history 修改了history.listen，使其传入所有location首先更新提供的store。
- 这样确保了sote是最新状态，无论它是来自导航事件或者时光机的action（例如replay），增强历史记录的监听器将保持同步。
- */
-const history = syncHistoryWithStore(browserHistory, store)
 
 
 const resize = ({ dispatch }) => {
@@ -20,6 +13,8 @@ const resize = ({ dispatch }) => {
   dispatch(appActions.toggleSider({ payload: { siderFold, siderVisible } }))
 }
 
+const { store, history } = redux
+
 document.body.clientWidth < 769 && resize(store)
 
 let tid
@@ -28,13 +23,13 @@ window.onresize = () => {
   tid = setTimeout(resize(store), 300)
 }
 
-render(
-  <Provider store={store}>
-    {/*
-     常用的 history 有三种形式， 但是你也可以使用 React Router 实现自定义的 history。
-     browserHistory  : 使用 React Router 的应用推荐的 history
-     hashHistory
-     createMemoryHistory
-     */}
-    <Routers history={history} />
-  </Provider>, document.getElementById('root'))
+
+render((<Provider store={store}>
+  {/*
+   常用的 history 有三种形式， 但是你也可以使用 React Router 实现自定义的 history。
+   browserHistory  : 使用 React Router 的应用推荐的 history
+   hashHistory
+   createMemoryHistory
+   */}
+  <Routers history={history} />
+</Provider>), document.querySelector('#root'))
diff --git a/src/menu.js b/src/menu.js
@@ -5,64 +5,64 @@ export const arrayMenu = [
   { id: 1, icon: 'laptop', name: '仪表盘', router: '/home' },
   { id: 101, name: '系统管理', icon: 'line-chart', router: '/sys' },
   { id: 102, pid: 101, name: '用户管理', icon: 'mail', router: '/sys/user' },
-  { id: 103, pid: 101, name: '活跃用户', icon: 'usergroup-add', router: '/bi/active' },
-  { id: 104, pid: 101, name: '广告转化', icon: 'area-chart' },
-  { id: 1041, pid: 104, name: '数据模型配置', icon: 'api', router: '/bi/adTemplate' },
-  { id: 1042, pid: 104, name: '广告点击', icon: 'bar-chart', router: '/bi/adClick' },
-  { id: 1043, pid: 104, name: '广告转化', icon: 'dot-chart', router: '/bi/adTake' },
-  { id: 106, pid: 101, name: 'PV/UV', icon: 'heart-o', router: '/bi/pv' },
-  { id: 201, name: '直播数据', icon: 'video-camera' },
-  { id: 202, pid: 201, name: '直播数据', icon: 'bar-chart', router: '/live/realtime' },
-  { id: 203, pid: 201, name: '用户数据', icon: 'solution', router: '/live/eachUser' },
-  { id: 204, pid: 201, name: '观看时长统计', icon: 'video-camera', router: '/live/avgPeriod' },
-  { id: 205, pid: 201, name: '事件统计', icon: 'bulb', router: '/live/events' },
-  { id: 301, name: '缓存管理', icon: 'database' },
-  { id: 302, pid: 301, name: 'REDIS', icon: 'hdd', router: '/redis/index' },
+  { id: 103, pid: 101, name: '测试菜单', icon: 'usergroup-add', router: '/test/test' },
+  { id: 104, pid: 101, name: '测试菜单', icon: 'area-chart' },
+  { id: 1041, pid: 104, name: '测试菜单', icon: 'api', router: '/test/test' },
+  { id: 1042, pid: 104, name: '测试菜单', icon: 'bar-chart', router: '/test/test' },
+  { id: 1043, pid: 104, name: '测试菜单', icon: 'dot-chart', router: '/test/test' },
+  { id: 106, pid: 101, name: '测试菜单', icon: 'heart-o', router: '/test/test' },
+  { id: 201, name: '测试菜单', icon: 'video-camera' },
+  { id: 202, pid: 201, name: '测试菜单', icon: 'bar-chart', router: '/test/test' },
+  { id: 203, pid: 201, name: '测试菜单', icon: 'solution', router: '/test/test' },
+  { id: 204, pid: 201, name: '测试菜单', icon: 'video-camera', router: '/test/test' },
+  { id: 205, pid: 201, name: '测试菜单', icon: 'bulb', router: '/test/test' },
+  { id: 301, name: '测试菜单', icon: 'database' },
+  { id: 302, pid: 301, name: '测试菜单', icon: 'hdd', router: '/test/index' },
 ]
 
 export const treeMenu = [{ id: 1, icon: 'laptop', name: '仪表盘', router: '/dashboard' }, {
   id: 101,
-  name: '行为数据',
+  name: '测试菜单',
   icon: 'line-chart',
-  children: [{ id: 102, pid: 101, name: '消息推送', icon: 'mail', router: '/bi/msgPush' }, {
+  children: [{ id: 102, pid: 101, name: '消息推送', icon: 'mail', router: '/test/test' }, {
     id: 103,
     pid: 101,
-    name: '活跃用户',
+    name: '测试菜单',
     icon: 'usergroup-add',
     router: '/bi/active',
   }, {
     id: 104,
     pid: 101,
-    name: '广告转化',
+    name: '测试菜单',
     icon: 'area-chart',
-    children: [{ id: 1041, pid: 104, name: '数据模型配置', icon: 'api', router: '/bi/adTemplate' }, {
+    children: [{ id: 1041, pid: 104, name: '测试菜单', icon: 'api', router: '/test/test' }, {
       id: 1042,
       pid: 104,
-      name: '广告点击',
+      name: '测试菜单',
       icon: 'bar-chart',
       router: '/bi/adClick',
-    }, { id: 1043, pid: 104, name: '广告转化', icon: 'dot-chart', router: '/bi/adTake' }],
-  }, { id: 106, pid: 101, name: 'PV/UV', icon: 'heart-o', router: '/bi/pv' }],
+    }, { id: 1043, pid: 104, name: '测试菜单', icon: 'dot-chart', router: '/test/test' }],
+  }, { id: 106, pid: 101, name: '测试菜单', icon: 'heart-o', router: '/test/test' }],
 }, {
   id: 201,
-  name: '直播数据',
+  name: '测试菜单',
   icon: 'video-camera',
-  children: [{ id: 202, pid: 201, name: '直播数据', icon: 'bar-chart', router: '/live/realtime' }, {
+  children: [{ id: 202, pid: 201, name: '测试菜单', icon: 'bar-chart', router: '/test/test' }, {
     id: 203,
     pid: 201,
-    name: '用户数据',
+    name: '测试菜单',
     icon: 'solution',
     router: '/live/eachUser',
-  }, { id: 204, pid: 201, name: '观看时长统计', icon: 'video-camera', router: '/live/avgPeriod' }, {
+  }, { id: 204, pid: 201, name: '测试菜单', icon: 'video-camera', router: '/test/test' }, {
     id: 205,
     pid: 201,
-    name: '事件统计',
+    name: '测试菜单',
     icon: 'bulb',
     router: '/live/events',
   }],
 }, {
   id: 301,
-  name: '缓存管理',
+  name: '测试菜单',
   icon: 'database',
-  children: [{ id: 302, pid: 301, name: 'REDIS', icon: 'hdd', router: '/redis/index' }],
+  children: [{ id: 302, pid: 301, name: '测试菜单', icon: 'hdd', router: '/test/index' }],
 }]
diff --git a/src/mock/user.js b/src/mock/user.js
@@ -19,6 +19,16 @@ let usersListData = Mock.mock({
   ],
 })
 
+const shuffle = function (input) {
+  for (let i = input.length - 1; i >= 0; i--) {
+    const randomIndex = Math.floor(Math.random() * (i + 1))
+    const itemAtIndex = input[randomIndex]
+    input[randomIndex] = input[i]
+    input[i] = itemAtIndex
+  }
+  return input
+}
+
 
 let database = usersListData.data
 
@@ -83,7 +93,7 @@ module.exports = {
     pageSize = pageSize || 10
     page = page || 1
 
-    let newData = database
+    let newData = shuffle(database)
 
     res.status(200).json({
       data: newData.slice((page - 1) * pageSize, page * pageSize),
diff --git a/src/redux/domain/index.js b/src/redux/domain/index.js
@@ -0,0 +1,5 @@
+import sysUser from './sysUser'
+
+export default {
+  sysUser,
+}
diff --git a/src/redux/domain/sysUser.js b/src/redux/domain/sysUser.js
@@ -0,0 +1,52 @@
+import 'es6-promise'
+import fetch from 'isomorphic-fetch'
+import { sysUserType } from '../actions/actionTypes'
+
+export default {
+  state: {
+    list: [],
+    pagination: {
+      showSizeChanger: true,
+      showQuickJumper: true,
+      showTotal: total => `共${total}条`,
+      current: 1,
+      total: 0,
+    },
+    initLoaded: false,
+    loading: false,
+  },
+  subscriptions: {
+    setup ({ dispatch, history }, { queryList }) {
+      return history.listen((location) => {
+        if (location.pathname === '/sys/user') {
+          dispatch(queryList({}))
+        }
+      })
+    },
+  },
+  actions: {
+    queryList: ({ payload }) => (dispatch) => {
+      let url = `http://127.0.0.1:3000/users?da=${JSON.stringify(payload)}`
+      dispatch({
+        type: sysUserType.LOAD,
+      })
+      return fetch(url, { mode: 'cors', 'Content-Type': 'application/json' })
+        .then((response) => {
+          if (response.ok) {
+            response.json().then(json => dispatch({
+              type: sysUserType.LOAD_FINISHED,
+              payload: { list: json.data },
+            }))
+          } else {
+            console.log('status', response.status)
+          }
+        })
+        .catch(error => console.log(error))
+    },
+  },
+  reducers: {
+    [sysUserType.LOAD_FINISHED]: (state, { payload }) => {
+      return { ...state, ...payload, initLoaded: true }
+    },
+  },
+}
diff --git a/src/redux/index.js b/src/redux/index.js
@@ -1,11 +1,14 @@
 /* eslint-disable linebreak-style */
-import { createStore, applyMiddleware, combineReducers } from 'redux'
+import { applyMiddleware, combineReducers, createStore } from 'redux'
 import thunkMiddleware from 'redux-thunk'
 import { browserHistory } from 'react-router'
 import { createLogger } from 'redux-logger'
-import { routerMiddleware, routerReducer } from 'react-router-redux'
+import { routerMiddleware, routerReducer, syncHistoryWithStore } from 'react-router-redux'
 import initState from './models'
-import reducers from './reducers'
+import reducersHolder from './reducers'
+import domains from './domain'
+import { createReducer } from '../utils/index'
+import { message } from 'antd'
 
 
 /*
@@ -15,37 +18,62 @@ import reducers from './reducers'
  browserHistory.push('/some/path')
  如果我想通过Redux操作发出导航事件怎么办？
  push(location), replace(location), go(number), goBack(), goForward(),必须为这些action creator安装routerMiddleware
-<pre>
-   import { routerMiddleware, push } from 'react-router-redux'
-   // Dispatch from anywhere like normal.
-   store.dispatch(push('/foo'))
-</pre>
-*/
+ <pre>
+ import { routerMiddleware, push } from 'react-router-redux'
+ // Dispatch from anywhere like normal.
+ store.dispatch(push('/foo'))
+ </pre>
+ */
 const routerReduxMiddleware = routerMiddleware(browserHistory)
 
 const loggerMiddleware = createLogger({
   level: 'info',
   collapsed: true,
 })
 
-
 /**
  * 添加redux中间件
  * 将所有中间件组成一个数组，依次执行，中间件的次序有讲究。
  *
  */
 const createStoreWithMiddleware = applyMiddleware(
-    // Action 是由store.dispatch方法发送的。而store.dispatch方法正常情况下，参数只能是对象，不能是函数。
-    // 使用redux-thunk中间件，改造store.dispatch，使得后者可以接受函数作为参数。
-    thunkMiddleware,
-    // 日志中间件
-    loggerMiddleware,
-    routerReduxMiddleware,
+  // Action 是由store.dispatch方法发送的。而store.dispatch方法正常情况下，参数只能是对象，不能是函数。
+  // 使用redux-thunk中间件，改造store.dispatch，使得后者可以接受函数作为参数。
+  thunkMiddleware,
+  // 日志中间件
+  loggerMiddleware,
+  routerReduxMiddleware,
 )(createStore)
 
+const subscriptionHolder = []
+for (const key in domains) {
+  if (Object.prototype.hasOwnProperty.call(domains, key)) {
+    const { state, reducers, actions, subscriptions } = domains[key]
+    reducersHolder[key] = createReducer(state || {}, reducers)
+    initState[key] = state || {}
+    subscriptionHolder.push({ subscriptions, actions })
+  }
+}
+
 const rootReducer = combineReducers({
-  ...reducers,
+  ...reducersHolder,
   routing: routerReducer, // 如果你使用 combineReducers,它应该被嵌套在 routing这个key下
 })
 
-export default createStoreWithMiddleware(rootReducer, initState)
+const store = createStoreWithMiddleware(rootReducer, initState)
+/*
+ 这个history 修改了history.listen，使其传入所有location首先更新提供的store。
+ 这样确保了sote是最新状态，无论它是来自导航事件或者时光机的action（例如replay），增强历史记录的监听器将保持同步。
+ */
+const history = syncHistoryWithStore(browserHistory, store)
+history.listen((location) => { alert(location.pathname) })
+const unListeners = []
+subscriptionHolder.forEach(({ subscriptions, actions }) => {
+  for (const method in subscriptions) {
+    if ({}.hasOwnProperty.call(subscriptions, method)) {
+      unListeners.push(subscriptions[method]({ ...store, history }, actions))
+    }
+  }
+})
+
+export default { store, history }
diff --git a/src/redux/models/index.js b/src/redux/models/index.js
@@ -1,11 +1,11 @@
 import appInitState from './app'
-import sysUser from './sysUser'
+// import sysUser from './sysUser'
 // import topicInitState from './modules/topic/topicInitState'
 // import userInitState from './modules/user/userInitState'
 
 export default {
   app: appInitState,
-  sysUser,
+  // sysUser,
   // topic: new topicInitState,
   // user: new userInitState
 }
diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
@@ -3,5 +3,5 @@ import sysUser from './sysUser'
 
 export default {
   app,
-  sysUser,
+  // sysUser,
 }
diff --git a/src/views/sys/users.js b/src/views/sys/users.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Button, Col, message, Form, Row, Input, Table } from 'antd'
-import * as userActions from '../../redux/actions/sys/user'
+import { actions as userActions } from '../../redux/domain/sysUser'
 
 const SysUserView = ({
                         sysUser,
@@ -12,11 +12,11 @@ const SysUserView = ({
                         },
                         ...others
                       }) => {
-  const { filterProps, pagination, loading, list: dataSource, initLoaded } = sysUser
+  const { filterProps, pagination, loading, list: dataSource } = sysUser
 
   const { queryList } = others
 
-  !initLoaded && queryList({ payload: {} })
+  // !initLoaded && queryList({ payload: {} })
 
   const handleSubmit = () => {
     let fields = getFieldsValue()
@@ -41,7 +41,7 @@ const SysUserView = ({
       dataIndex: 'avatar',
       key: 'avatar',
       width: 64,
-      render: (text) => <img alt={'avatar'} width={24} src={text} />,
+      render: text => <img alt={'avatar'} width={24} src={text} />,
     }, {
       title: 'Name',
       dataIndex: 'name',
@@ -58,9 +58,9 @@ const SysUserView = ({
       title: 'Gender',
       dataIndex: 'isMale',
       key: 'isMale',
-      render: (text) => <span>{text
+      render: text => (<span>{text
         ? 'Male'
-        : 'Female'}</span>,
+        : 'Female'}</span>),
     }, {
       title: 'Phone',
       dataIndex: 'phone',
@@ -77,7 +77,7 @@ const SysUserView = ({
       title: 'CreateTime',
       dataIndex: 'createTime',
       key: 'createTime',
-    },]
+    }]
 
   const listProps = {
     pagination: { ...pagination, showSizeChanger: true, showQuickJumper: true },
diff --git a/src/views/sys/users2.js b/src/views/sys/users2.js

Original file line number	Diff line number	Diff line change
`@@ -3,5 +3,5 @@ import sysUser from './sysUser'`
`3`	`3`
`4`	`4`	`export default {`
`5`	`5`	`app,`
`6`		`- sysUser,`
	`6`	`+ // sysUser,`
`7`	`7`	`}`