74 |
75 |
76 |
77 |
78 |
79 |
record.id}
84 | pagination={false}
85 | />
86 |
93 |
94 |
95 | );
96 | }
97 |
98 | function mapStateToProps(state) {
99 | const { list, total, page } = state.users;
100 | return {
101 | loading: state.loading.models.users,
102 | list,
103 | total,
104 | page,
105 | };
106 | }
107 |
108 | export default connect(mapStateToProps)(Users);
109 |
--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
1 |
2 | export const PAGE_SIZE = 3;
3 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 |
2 | html, body, :global(#root) {
3 | height: 100%;
4 | }
5 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Dva Demo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import dva from 'dva';
2 | import { browserHistory } from 'dva/router';
3 | import createLoading from 'dva-loading';
4 | import { message } from 'antd';
5 | import './index.html';
6 | import './index.css';
7 |
8 | const ERROR_MSG_DURATION = 3; // 3 秒
9 |
10 | // 1. Initialize
11 | const app = dva({
12 | history: browserHistory,
13 | onError(e) {
14 | message.error(e.message, ERROR_MSG_DURATION);
15 | },
16 | });
17 |
18 | // 2. Plugins
19 | app.use(createLoading());
20 |
21 | // 3. Model
22 | // Moved to router.js
23 |
24 | // 4. Router
25 | app.router(require('./router'));
26 |
27 | // 5. Start
28 | app.start('#root');
29 |
--------------------------------------------------------------------------------
/src/models/users.js:
--------------------------------------------------------------------------------
1 | import * as usersService from '../services/users';
2 |
3 | export default {
4 | namespace: 'users',
5 | state: {
6 | list: [],
7 | total: null,
8 | page: null,
9 | },
10 | reducers: {
11 | save(state, { payload: { data: list, total, page } }) {
12 | return { ...state, list, total, page };
13 | },
14 | },
15 | effects: {
16 | *fetch({ payload: { page = 1 } }, { call, put }) {
17 | const { data, headers } = yield call(usersService.fetch, { page });
18 | yield put({
19 | type: 'save',
20 | payload: {
21 | data,
22 | total: parseInt(headers['x-total-count'], 10),
23 | page: parseInt(page, 10),
24 | },
25 | });
26 | },
27 | *remove({ payload: id }, { call, put }) {
28 | yield call(usersService.remove, id);
29 | yield put({ type: 'reload' });
30 | },
31 | *patch({ payload: { id, values } }, { call, put }) {
32 | yield call(usersService.patch, id, values);
33 | yield put({ type: 'reload' });
34 | },
35 | *create({ payload: values }, { call, put }) {
36 | yield call(usersService.create, values);
37 | yield put({ type: 'reload' });
38 | },
39 | *reload(action, { put, select }) {
40 | const page = yield select(state => state.users.page);
41 | yield put({ type: 'fetch', payload: { page } });
42 | },
43 | },
44 | subscriptions: {
45 | setup({ dispatch, history }) {
46 | return history.listen(({ pathname, query }) => {
47 | if (pathname === '/users') {
48 | dispatch({ type: 'fetch', payload: query });
49 | }
50 | });
51 | },
52 | },
53 | };
54 |
--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Router } from 'dva/router';
3 |
4 | const cached = {};
5 | function registerModel(app, model) {
6 | if (!cached[model.namespace]) {
7 | app.model(model);
8 | cached[model.namespace] = 1;
9 | }
10 | }
11 |
12 | function RouterConfig({ history, app }) {
13 | const routes = [
14 | {
15 | path: '/',
16 | name: 'IndexPage',
17 | getComponent(nextState, cb) {
18 | require.ensure([], (require) => {
19 | cb(null, require('./routes/IndexPage'));
20 | });
21 | },
22 | },
23 | {
24 | path: '/users',
25 | name: 'UsersPage',
26 | getComponent(nextState, cb) {
27 | require.ensure([], (require) => {
28 | registerModel(app, require('./models/users'));
29 | cb(null, require('./routes/Users'));
30 | });
31 | },
32 | },
33 | ];
34 |
35 | return ;
36 | }
37 |
38 | export default RouterConfig;
39 |
--------------------------------------------------------------------------------
/src/routes/IndexPage.css:
--------------------------------------------------------------------------------
1 |
2 | .normal {
3 | font-family: Georgia, sans-serif;
4 | margin-top: 3em;
5 | text-align: center;
6 | }
7 |
8 | .title {
9 | font-size: 2.5rem;
10 | font-weight: normal;
11 | letter-spacing: -1px;
12 | }
13 |
14 | .welcome {
15 | height: 328px;
16 | background: url(../assets/yay.jpg) no-repeat center 0;
17 | background-size: 388px 328px;
18 | }
19 |
20 | .list {
21 | font-size: 1.2em;
22 | margin-top: 1.8em;
23 | list-style: none;
24 | line-height: 1.5em;
25 | }
26 |
27 | .list code {
28 | background: #f7f7f7;
29 | }
30 |
--------------------------------------------------------------------------------
/src/routes/IndexPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'dva';
3 | import styles from './IndexPage.css';
4 | import MainLayout from '../components/MainLayout/MainLayout';
5 |
6 | function IndexPage({ location }) {
7 | return (
8 |
9 |
10 |
Yay! Welcome to dva!
11 |
12 |
13 | - To get started, edit
src/index.js and save to reload.
14 | - Getting Started
15 |
16 |
11 |
12 |
13 |
14 | );
15 | }
16 |
17 | export default connect()(Users);
18 |
--------------------------------------------------------------------------------
/src/services/users.js:
--------------------------------------------------------------------------------
1 | import request from '../utils/request';
2 | import { PAGE_SIZE } from '../constants';
3 |
4 | export function fetch({ page }) {
5 | return request(`/api/users?_page=${page}&_limit=${PAGE_SIZE}`);
6 | }
7 |
8 | export function remove(id) {
9 | return request(`/api/users/${id}`, {
10 | method: 'DELETE',
11 | });
12 | }
13 |
14 | export function patch(id, values) {
15 | return request(`/api/users/${id}`, {
16 | method: 'PATCH',
17 | body: JSON.stringify(values),
18 | });
19 | }
20 |
21 | export function create(values) {
22 | return request('/api/users', {
23 | method: 'POST',
24 | body: JSON.stringify(values),
25 | });
26 | }
27 |
--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
1 | import fetch from 'dva/fetch';
2 |
3 | function checkStatus(response) {
4 | if (response.status >= 200 && response.status < 300) {
5 | return response;
6 | }
7 |
8 | const error = new Error(response.statusText);
9 | error.response = response;
10 | throw error;
11 | }
12 |
13 | /**
14 | * Requests a URL, returning a promise.
15 | *
16 | * @param {string} url The URL we want to request
17 | * @param {object} [options] The options we want to pass to "fetch"
18 | * @return {object} An object containing either "data" or "err"
19 | */
20 | export default async function request(url, options) {
21 | const response = await fetch(url, options);
22 |
23 | checkStatus(response);
24 |
25 | const data = await response.json();
26 |
27 | const ret = {
28 | data,
29 | headers: {},
30 | };
31 |
32 | if (response.headers.get('x-total-count')) {
33 | ret.headers['x-total-count'] = response.headers.get('x-total-count');
34 | }
35 |
36 | return ret;
37 | }
38 |
--------------------------------------------------------------------------------
9 |