添加了几个复杂场景的demo，增加了单元测试

package.json

@@ -8,7 +8,7 @@
     "precommit": "npm run lint"
   },
   "dependencies": {
-    "antd": "^2.6.4",
+    "antd": "^2.8.3",
     "babel-runtime": "^6.22.0",
     "dva": "^1.2.0",
     "dva-loading": "^0.2.0",

src/components/Logger/Logger.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { connect } from 'dva';
+
+function Logger({ logs }) {
+  return (
+    <div>
+      <hr />
+      <h2>Logger</h2>
+      <ul>
+        { logs.map(log => (<li key={log.id}>{log.text}</li>)) }
+      </ul>
+    </div>
+  );
+}
+
+Logger.propTypes = {
+};
+
+function mapStateToProps(state) {
+  const { logs } = state.logger;
+  return {
+    logs,
+  };
+}
+export default connect(mapStateToProps)(Logger);

src/components/MainLayout/Header.js

@@ -15,10 +15,19 @@ function Header({ location }) {
       <Menu.Item key="/">
         <Link to="/"><Icon type="home" />Home</Link>
       </Menu.Item>
+      <Menu.Item key="/tasks">
+        <Link to="/tasks"><Icon type="bars" />Tasks</Link>
+      </Menu.Item>
+      <Menu.Item key="/a">
+        <Link to="/a"><Icon type="bars" />A</Link>
+      </Menu.Item>
+      <Menu.Item key="/b">
+        <Link to="/b"><Icon type="bars" />B</Link>
+      </Menu.Item>
       <Menu.Item key="/404">
         <Link to="/page-you-dont-know"><Icon type="frown-circle" />404</Link>
       </Menu.Item>
-      <Menu.Item key="/antd">
+      <Menu.Item key="/dva">
         <a href="https://github.com/dvajs/dva">dva</a>
       </Menu.Item>
     </Menu>

src/components/Reusable/Reusable.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { connect } from 'dva';
+
+function Reusable({ messages }) {
+  return (
+    <div>
+      <hr />
+      <h2>Messages</h2>
+      <ul>
+        { messages.map(message => (<li key={message.id}>{message.text}</li>)) }
+      </ul>
+    </div>
+  );
+}
+
+Reusable.propTypes = {
+};
+
+function mapStateToProps(state) {
+  const { messages } = state.reusable;
+  return {
+    messages,
+  };
+}
+export default connect(mapStateToProps)(Reusable);

src/index.js

@@ -5,6 +5,9 @@ import { message } from 'antd';
 import './index.html';
 import './index.css';
 
+import logger from './models/logger';
+import reusable from './models/reusable';
+
 const ERROR_MSG_DURATION = 3; // 3 秒
 
 // 1. Initialize
@@ -20,6 +23,8 @@ app.use(createLoading());
 
 // 3. Model
 // Moved to router.js
+app.model(logger);
+app.model(reusable);
 
 // 4. Router
 app.router(require('./router'));

src/models/a.js

@@ -0,0 +1,15 @@
+import { delay } from '../services/delay';
+
+export default {
+  namespace: 'a',
+  state: '',
+  reducers: {
+  },
+  effects: {
+    *foo(action, { call, put }) {
+      yield call(delay, 1000);
+      yield put({ type: 'reusable/addMessage', payload: '666' });
+    },
+  },
+};
+

src/models/b.js

@@ -0,0 +1,28 @@
+import { delay } from '../services/delay';
+
+export default {
+  namespace: 'b',
+  state: '',
+  reducers: {
+  },
+  effects: {
+    addWatcher: [function *watcher({ take, put }) {
+      /* eslint-disable */
+      while (true) {
+        /* eslint-enable */
+        // watch foo action from model a
+        const data1 = yield take('a/foo');
+        yield put({ type: 'reusable/addMessage', payload: `observe an action from model A: ${data1}` });
+
+        // watch addLogSuccess action from model reuseable
+        const data2 = yield take('reusable/addMessageSuccess');
+        yield put({ type: 'reusable/addMessage', payload: `observe an action from model reusable: ${data2}` });
+      }
+    }, { type: 'watcher' }],
+
+    *foo(action, { call, put }) {
+      yield call(delay, 3000);
+      yield put({ type: 'reusable/addMessage', payload: '233' });
+    },
+  },
+};

src/models/logger.js

@@ -0,0 +1,21 @@
+export default {
+  namespace: 'logger',
+  state: {
+    logs: [],
+  },
+  reducers: {
+    addLog(state, { payload }) {
+      const log = {
+        id: state.logs.length,
+        text: payload,
+      };
+
+      const logs = state.logs.concat([log]);
+      return {
+        logs,
+      };
+    },
+  },
+  effects: {
+  },
+};

src/models/reusable.js

@@ -0,0 +1,34 @@
+import { delay } from '../services/delay';
+
+export default {
+  namespace: 'reusable',
+  state: {
+    messages: [],
+  },
+  reducers: {
+    addMessageSuccess(state, { payload }) {
+      const message = {
+        id: state.messages.length,
+        text: payload,
+      };
+
+      const messages = state.messages.concat([message]);
+      return {
+        messages,
+      };
+    },
+  },
+  effects: {
+    *addMessage(action, { call, put }) {
+      const { payload } = action;
+      const { resolve } = payload;
+      yield call(delay, 1000);
+
+      if (resolve) {
+        resolve(payload);
+      }
+
+      yield put({ type: 'addMessageSuccess', payload });
+    },
+  },
+};

src/models/task.js

@@ -0,0 +1,44 @@
+import { delay } from '../services/delay';
+import { makeService } from '../services/makeService';
+
+export default {
+  namespace: 'task',
+  state: {
+  },
+  reducers: {
+  },
+  effects: {
+    *sequential(action, { call, put }) {
+      yield call(delay, 3000);
+      yield put({ type: 'logger/addLog', payload: 'step1' });
+      yield call(delay, 5000);
+      yield put({ type: 'logger/addLog', payload: 'step2' });
+    },
+    *parallel(action, { call, put }) {
+      yield put({ type: 'logger/addLog', payload: 'all started' });
+
+      // 注意这里不要写yield*，不然会顺序执行的
+      yield [
+        call(makeService(3000), 'service 1'),
+        call(makeService(5000), 'service 2'),
+        call(makeService(7000), 'service 3'),
+      ];
+
+      yield put({ type: 'logger/addLog', payload: 'all completed' });
+    },
+    *race(action, { call, put, race }) {
+      yield put({ type: 'logger/addLog', payload: 'start race' });
+
+      const { data, timeout } = yield race({
+        data: call(makeService(2000), 'some data'),
+        timeout: call(delay, 3000),
+      });
+
+      if (data) {
+        yield put({ type: 'logger/addLog', payload: data });
+      } else {
+        yield put({ type: 'logger/addLog', payload: `timeout: ${timeout}` });
+      }
+    },
+  },
+};

src/models/users.js

@@ -1,6 +1,9 @@
 import * as usersService from '../services/users';
 
-export default {
+// selector放在这里，而且要export出来，不然不好写测试……
+export const pageSelector = state => state.users.page;
+
+export const user = {
   namespace: 'users',
   state: {
     list: [],
@@ -37,7 +40,7 @@ export default {
       yield put({ type: 'reload' });
     },
     *reload(action, { put, select }) {
-      const page = yield select(state => state.users.page);
+      const page = yield select(pageSelector);
       yield put({ type: 'fetch', payload: { page } });
     },
   },

src/router.js

@@ -25,11 +25,41 @@ function RouterConfig({ history, app }) {
       name: 'UsersPage',
       getComponent(nextState, cb) {
         require.ensure([], (require) => {
-          registerModel(app, require('./models/users'));
+          registerModel(app, require('./models/users').user);
           cb(null, require('./routes/Users'));
         });
       },
     },
+    {
+      path: '/tasks',
+      name: 'TasksPage',
+      getComponent(nextState, cb) {
+        require.ensure([], (require) => {
+          cb(null, require('./routes/Tasks'));
+          registerModel(app, require('./models/task'));
+        });
+      },
+    },
+    {
+      path: '/a',
+      name: 'APage',
+      getComponent(nextState, cb) {
+        require.ensure([], (require) => {
+          cb(null, require('./routes/A'));
+          registerModel(app, require('./models/a'));
+        });
+      },
+    },
+    {
+      path: '/b',
+      name: 'BPage',
+      getComponent(nextState, cb) {
+        require.ensure([], (require) => {
+          cb(null, require('./routes/B'));
+          registerModel(app, require('./models/b'));
+        });
+      },
+    },
   ];
 
   return <Router history={history} routes={routes} />;

src/routes/A.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { connect } from 'dva';
+import MainLayout from '../components/MainLayout/MainLayout';
+import Reusable from '../components/Reusable/Reusable';
+import Logger from '../components/Logger/Logger';
+
+function A({ dispatch, location }) {
+  const bar = () => {
+    new Promise((resolve, reject) => {
+      dispatch({ type: 'reusable/addLog', payload: { data: 9527, resolve, reject } });
+    })
+    .then(() => {
+      // console.log(`after a long time, ${data} returns`);
+    });
+  };
+
+  return (
+    <MainLayout location={location}>
+      <h1>Component A</h1>
+      <div>
+        <button onClick={() => { dispatch({ type: 'a/foo' }); }}>add 666</button>
+        <button onClick={bar}>do a lot of things</button>
+        <Reusable />
+        <Logger />
+      </div>
+    </MainLayout>
+  );
+}
+
+A.propTypes = {
+};
+
+export default connect()(A);

src/routes/B.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { connect } from 'dva';
+import MainLayout from '../components/MainLayout/MainLayout';
+import Reusable from '../components/Reusable/Reusable';
+import Logger from '../components/Logger/Logger';
+
+function B({ dispatch, location }) {
+  return (
+    <MainLayout location={location}>
+      <h1>Component B</h1>
+      <div>
+        <button onClick={() => { dispatch({ type: 'b/foo' }); }}>add 233</button>
+        <Reusable />
+        <Logger />
+      </div>
+    </MainLayout>
+  );
+}
+
+B.propTypes = {
+};
+
+export default connect()(B);

src/routes/Tasks.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { connect } from 'dva';
+import MainLayout from '../components/MainLayout/MainLayout';
+import Logger from '../components/Logger/Logger';
+
+function Tasks({ dispatch, location }) {
+  return (
+    <MainLayout location={location}>
+      <div>
+        <button onClick={() => { dispatch({ type: 'task/sequential' }); }}>Sequential</button>
+        <button onClick={() => { dispatch({ type: 'task/parallel' }); }}>Parallel</button>
+        <button onClick={() => { dispatch({ type: 'task/race' }); }}>Race</button>
+      </div>
+      <Logger />
+    </MainLayout>
+  );
+}
+
+Tasks.propTypes = {
+};
+
+export default connect()(Tasks);

src/services/delay.js

@@ -0,0 +1,5 @@
+export const delay = (timeout) => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeout);
+  });
+};