| 
|
20 | [https://t.me/joinchat/G0DdHw9tDZC-_NmdKY2jYg](https://t.me/joinchat/G0DdHw9tDZC-_NmdKY2jYg)
21 |
--------------------------------------------------------------------------------
/docs/guide/README.md:
--------------------------------------------------------------------------------
1 | # 介绍
2 |
3 | dva 首先是一个基于 [redux](https://github.com/reduxjs/redux) 和 [redux-saga](https://github.com/redux-saga/redux-saga) 的数据流方案，然后为了简化开发体验，dva 还额外内置了 [react-router](https://github.com/ReactTraining/react-router) 和 [fetch](https://github.com/github/fetch)，所以也可以理解为一个轻量级的应用框架。
4 |
5 | ## 特性
6 |
7 | * **易学易用**，仅有 6 个 api，对 redux 用户尤其友好，[配合 umi 使用](https://umijs.org/guide/with-dva.html)后更是降低为 0 API
8 | * **elm 概念**，通过 reducers, effects 和 subscriptions 组织 model
9 | * **插件机制**，比如 [dva-loading](https://github.com/dvajs/dva/tree/master/packages/dva-loading) 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading
10 | * **支持 HMR**，基于 [babel-plugin-dva-hmr](https://github.com/dvajs/babel-plugin-dva-hmr) 实现 components、routes 和 models 的 HMR
11 |
12 | ## 他是如何工作的？
13 |
14 | ## 他是怎么来的？
15 |
16 | * [Why dva and what's dva](https://github.com/dvajs/dva/issues/1)
17 | * [支付宝前端应用架构的发展和选择](https://www.github.com/sorrycc/blog/issues/6)
18 |
19 | ## 谁在用？
20 |
21 | ## 为什么不是...?
22 |
23 | ### redux
24 | ### mobx
25 |
26 | ## 命名由来？
27 |
28 | > D.Va拥有一部强大的机甲，它具有两台全自动的近距离聚变机炮、可以使机甲飞跃敌人或障碍物的推进器、 还有可以抵御来自正面的远程攻击的防御矩阵。
29 |
30 | —— 来自 [守望先锋](https://ow.blizzard.cn/heroes/overwatch-dva) 。
31 |
32 | 
33 |
--------------------------------------------------------------------------------
/docs/guide/concepts.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebarDepth: 2
3 | ---
4 |
5 | # Dva 概念
6 |
7 | ## 数据流向
8 |
9 | 数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 `dispatch` 发起一个 action，如果是同步行为会直接通过 `Reducers` 改变 `State` ，如果是异步行为（副作用）会先触发 `Effects` 然后流向 `Reducers` 最终改变 `State`，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）。
10 |
11 | 
12 |
13 | ## Models
14 |
15 | ### State
16 |
17 | `type State = any`
18 |
19 | State 表示 Model 的状态数据，通常表现为一个 javascript 对象（当然它可以是任何值）；操作的时候每次都要当作不可变数据（immutable data）来对待，保证每次都是全新对象，没有引用关系，这样才能保证 State 的独立性，便于测试和追踪变化。
20 |
21 | 在 dva 中你可以通过 dva 的实例属性 `_store` 看到顶部的 state 数据，但是通常你很少会用到:
22 |
23 | ```javascript
24 | const app = dva();
25 | console.log(app._store); // 顶部的 state 数据
26 | ```
27 |
28 | ### Action
29 |
30 | `type AsyncAction = any`
31 |
32 | Action 是一个普通 javascript 对象，它是改变 State 的唯一途径。无论是从 UI 事件、网络回调，还是 WebSocket 等数据源所获得的数据，最终都会通过 dispatch 函数调用一个 action，从而改变对应的数据。action 必须带有 `type` 属性指明具体的行为，其它字段可以自定义，如果要发起一个 action 需要使用 `dispatch` 函数；需要注意的是 `dispatch` 是在组件 connect Models以后，通过 props 传入的。
33 | ```
34 | dispatch({
35 | type: 'add',
36 | });
37 | ```
38 |
39 | ### dispatch 函数
40 |
41 | `type dispatch = (a: Action) => Action`
42 |
43 | dispatching function 是一个用于触发 action 的函数，action 是改变 State 的唯一途径，但是它只描述了一个行为，而 dipatch 可以看作是触发这个行为的方式，而 Reducer 则是描述如何改变数据的。
44 |
45 | 在 dva 中，connect Model 的组件通过 props 可以访问到 dispatch，可以调用 Model 中的 Reducer 或者 Effects，常见的形式如：
46 |
47 | ```javascript
48 | dispatch({
49 | type: 'user/add', // 如果在 model 外调用，需要添加 namespace
50 | payload: {}, // 需要传递的信息
51 | });
52 | ```
53 |
54 | ### Reducer
55 |
56 | `type Reducer4 | > 原文链接：[https://yuque.com/flying.ni/the-tower/tvzasn](https://yuque.com/flying.ni/the-tower/tvzasn) 5 | 6 | ## 示例背景 7 | 8 | 最常见的 Web 类示例之一: TodoList = Todo list + Add todo button 9 | 10 | ## 图解一: React 表示法 11 | 12 |  13 | 14 | 按照 React 官方指导意见, 如果多个 Component 之间要发生交互, 那么状态(即: 数据)就维护在这些 Component 的最小公约父节点上, 也即是 `
List of Products
76 | ); 77 | 78 | export default Products; 79 | ``` 80 | 81 | 添加路由信息到路由表，编辑 `router.js` : 82 | 83 | ```diff 84 | + import Products from './routes/Products'; 85 | ... 86 | +` 标签。
90 |
91 | ## 编写 UI Component
92 |
93 | 随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，在 dva 里你可以把这部分抽成 component 。
94 |
95 | 我们来编写一个 `ProductList` component，这样就能在不同的地方显示产品列表了。
96 |
97 | 新建 `components/ProductList.js` 文件：
98 |
99 | ```javascript
100 | import React from 'react';
101 | import PropTypes from 'prop-types';
102 | import { Table, Popconfirm, Button } from 'antd';
103 |
104 | const ProductList = ({ onDelete, products }) => {
105 | const columns = [{
106 | title: 'Name',
107 | dataIndex: 'name',
108 | }, {
109 | title: 'Actions',
110 | render: (text, record) => {
111 | return (
112 | onDelete(record.id)}>
113 |
114 |
115 | );
116 | },
117 | }];
118 | return (
119 |
189 |
192 | );
193 | };
194 |
195 | // export default Products;
196 | export default connect(({ products }) => ({
197 | products,
198 | }))(Products);
199 | ```
200 |
201 | 最后，我们还需要一些初始数据让这个应用 run 起来。编辑 `index.js`：
202 |
203 | ```diff
204 | - const app = dva();
205 | + const app = dva({
206 | + initialState: {
207 | + products: [
208 | + { name: 'dva', id: 1 },
209 | + { name: 'antd', id: 2 },
210 | + ],
211 | + },
212 | + });
213 | ```
214 |
215 | 刷新浏览器，应该能看到以下效果：
216 |
217 | List of Products
190 |
218 | 
219 |
39 |
;
42 | }
43 | }
44 |
45 | ReactDOM.render(这里显示 Son 组件的内容
41 |
73 |
74 |
;
76 | }
77 | }
78 |
79 | ReactDOM.render(这里显示 Son 组件的内容：{this.state.son}
75 |Hello dva
;
114 |
115 | // 创建应用
116 | const app = dva();
117 | // 注册视图
118 | app.router(() => 
126 |
127 | ## 核心概念
128 | * State：一个对象，保存整个应用状态
129 | * View：React 组件构成的视图层
130 | * Action：一个对象，描述事件
131 | * connect 方法：一个函数，绑定 State 到 View
132 | * dispatch 方法：一个函数，发送 Action 到 State
133 |
134 | ## State 和 View
135 | State 是储存数据的地方，收到 Action 以后，会更新数据。
136 |
137 | View 就是 React 组件构成的 UI 层，从 State 取数据后，渲染成 HTML 代码。只要 State 有变化，View 就会自动更新。
138 |
139 | ## Action
140 | Action 是用来描述 UI 层事件的一个对象。
141 |
142 | ```js
143 | {
144 | type: 'click-submit-button',
145 | payload: this.form.data
146 | }
147 | ```
148 |
149 | ## connect 方法
150 |
151 | connect 是一个函数，绑定 State 到 View。
152 |
153 | ```js
154 | import { connect } from 'dva';
155 |
156 | function mapStateToProps(state) {
157 | return { todos: state.todos };
158 | }
159 | connect(mapStateToProps)(App);
160 | ```
161 |
162 | connect 方法返回的也是一个 React 组件，通常称为容器组件。因为它是原始 UI 组件的容器，即在外面包了一层 State。
163 |
164 | connect 方法传入的第一个参数是 mapStateToProps 函数，mapStateToProps 函数会返回一个对象，用于建立 State 到 Props 的映射关系。
165 |
166 | ## dispatch 方法
167 | dispatch 是一个函数方法，用来将 Action 发送给 State。
168 |
169 | ```js
170 | dispatch({
171 | type: 'click-submit-button',
172 | payload: this.form.data
173 | })
174 | ```
175 |
176 | dispatch 方法从哪里来？被 connect 的 Component 会自动在 props 中拥有 dispatch 方法。
177 |
178 | > connect 的数据从哪里来?
179 |
180 | ## dva 应用的最简结构（带 model)
181 | ```js
182 | // 创建应用
183 | const app = dva();
184 |
185 | // 注册 Model
186 | app.model({
187 | namespace: 'count',
188 | state: 0,
189 | reducers: {
190 | add(state) { return state + 1 },
191 | },
192 | effects: {
193 | *addAfter1Second(action, { call, put }) {
194 | yield call(delay, 1000);
195 | yield put({ type: 'add' });
196 | },
197 | },
198 | });
199 |
200 | // 注册视图
201 | app.router(() => 
210 |
211 | ## 数据流图 2
212 |
213 | 
214 |
215 | ## app.model
216 |
217 | dva 提供 app.model 这个对象，所有的应用逻辑都定义在它上面。
218 |
219 | ```js
220 | const app = dva();
221 |
222 | // 新增这一行
223 | app.model({ /**/ });
224 |
225 | app.router(() => 
303 |
--------------------------------------------------------------------------------
/examples/func-test/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": "airbnb",
4 | "rules": {
5 | "generator-star-spacing": [0],
6 | "consistent-return": [0],
7 | "react/forbid-prop-types": [0],
8 | "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
9 | "global-require": [1],
10 | "import/prefer-default-export": [0],
11 | "react/jsx-no-bind": [0],
12 | "react/prop-types": [0],
13 | "react/prefer-stateless-function": [0],
14 | "no-else-return": [0],
15 | "no-restricted-syntax": [0],
16 | "import/no-extraneous-dependencies": [0],
17 | "no-use-before-define": [0],
18 | "jsx-a11y/no-static-element-interactions": [0],
19 | "no-nested-ternary": [0],
20 | "arrow-body-style": [0],
21 | "import/extensions": [0],
22 | "no-bitwise": [0],
23 | "no-cond-assign": [0],
24 | "import/no-unresolved": [0],
25 | "require-yield": [1]
26 | },
27 | "parserOptions": {
28 | "ecmaFeatures": {
29 | "experimentalObjectRestSpread": true
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/examples/func-test/.roadhogrc:
--------------------------------------------------------------------------------
1 | {
2 | "entry": "src/index.js",
3 | "env": {
4 | "development": {
5 | "extraBabelPlugins": [
6 | "dva-hmr",
7 | "transform-runtime"
8 | ]
9 | },
10 | "production": {
11 | "extraBabelPlugins": [
12 | "transform-runtime"
13 | ]
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/examples/func-test/.roadhogrc.mock.js:
--------------------------------------------------------------------------------
1 | export default {};
2 |
--------------------------------------------------------------------------------
/examples/func-test/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dva-example",
3 | "private": true,
4 | "scripts": {
5 | "start": "roadhog server",
6 | "build": "roadhog build",
7 | "lint": "eslint --ext .js src test"
8 | },
9 | "engines": {
10 | "install-node": "6.9.2"
11 | },
12 | "dependencies": {
13 | "babel-runtime": "^6.9.2",
14 | "dva": "^2.0.0-0",
15 | "react": "^16.0.0",
16 | "react-dom": "^16.0.0"
17 | },
18 | "devDependencies": {
19 | "babel-eslint": "^7.1.1",
20 | "babel-plugin-dva-hmr": "^0.3.2",
21 | "babel-plugin-module-alias": "^1.6.0",
22 | "babel-plugin-transform-runtime": "^6.9.0",
23 | "eslint": "^3.12.2",
24 | "eslint-config-airbnb": "^13.0.0",
25 | "eslint-plugin-import": "^2.2.0",
26 | "eslint-plugin-jsx-a11y": "^2.2.3",
27 | "eslint-plugin-react": "^6.8.0",
28 | "expect": "^1.20.2",
29 | "redbox-react": "^1.3.2",
30 | "roadhog": "^1.2.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/examples/func-test/src/assets/yay.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dvajs/dva/7490ae91234990f385e58b9abfa62eceb8cd849b/examples/func-test/src/assets/yay.jpg
--------------------------------------------------------------------------------
/examples/func-test/src/components/Example.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Example = () => {
4 | return Example
;
5 | };
6 |
7 | Example.propTypes = {};
8 |
9 | export default Example;
10 |
--------------------------------------------------------------------------------
/examples/func-test/src/index.css:
--------------------------------------------------------------------------------
1 |
2 | html, body, :global(#root) {
3 | height: 100%;
4 | }
5 |
6 |
--------------------------------------------------------------------------------
/examples/func-test/src/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 |
21 | );
22 | }
23 |
24 | IndexPage.propTypes = {};
25 |
26 | export default connect()(IndexPage);
27 |
--------------------------------------------------------------------------------
/examples/func-test/src/services/example.js:
--------------------------------------------------------------------------------
1 | import request from '../utils/request';
2 |
3 | export async function query() {
4 | return request('/api/users');
5 | }
6 |
--------------------------------------------------------------------------------
/examples/func-test/src/utils/request.js:
--------------------------------------------------------------------------------
1 | import fetch from 'dva/fetch';
2 |
3 | function parseJSON(response) {
4 | return response.json();
5 | }
6 |
7 | function checkStatus(response) {
8 | if (response.status >= 200 && response.status < 300) {
9 | return response;
10 | }
11 |
12 | const error = new Error(response.statusText);
13 | error.response = response;
14 | throw error;
15 | }
16 |
17 | /**
18 | * Requests a URL, returning a promise.
19 | *
20 | * @param {string} url The URL we want to request
21 | * @param {object} [options] The options we want to pass to "fetch"
22 | * @return {object} An object containing either "data" or "err"
23 | */
24 | export default function request(url, options) {
25 | return fetch(url, options)
26 | .then(checkStatus)
27 | .then(parseJSON)
28 | .then(data => ({ data }))
29 | .catch(err => ({ err }));
30 | }
31 |
--------------------------------------------------------------------------------
/examples/user-dashboard/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 | [*.md]
13 | trim_trailing_whitespace = false
14 |
15 | [Makefile]
16 | indent_style = tab
17 |
--------------------------------------------------------------------------------
/examples/user-dashboard/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "umi"
3 | }
--------------------------------------------------------------------------------
/examples/user-dashboard/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .DS_Store
4 |
5 | .idea/
6 |
--------------------------------------------------------------------------------
/examples/user-dashboard/.umirc.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: ['umi-plugin-dva'],
3 | };
4 |
--------------------------------------------------------------------------------
/examples/user-dashboard/.webpackrc:
--------------------------------------------------------------------------------
1 | {
2 | "theme": {
3 | "@primary-color": "#dc6aac",
4 | "@link-color": "#dc6aac",
5 | "@border-radius-base": "2px",
6 | "@font-size-base": "16px",
7 | "@line-height-base": "1.2"
8 | },
9 | "proxy": {
10 | "/api": {
11 | "target": "http://jsonplaceholder.typicode.com/",
12 | "changeOrigin": true,
13 | "pathRewrite": { "^/api" : "" }
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/examples/user-dashboard/README.md:
--------------------------------------------------------------------------------
1 | # dva-example-user-dashboard
2 |
3 | 详见[《12 步 30 分钟，完成用户管理的 CURD 应用 (react+dva+antd)》](https://github.com/sorrycc/blog/issues/18)。
4 |
5 | ---
6 |
7 | Yay! Welcome to dva!
9 | 10 |-
11 |
-
12 | To get started, edit
src/index.jsand save to reload. 13 |
14 | - 15 | 16 | Getting Started 17 | 18 | 19 |
8 | 
9 |
8 |
13 | );
14 | }
15 |
16 | export default MainLayout;
17 |
--------------------------------------------------------------------------------
/examples/user-dashboard/src/pages/.umi/DvaContainer.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import dva from 'dva';
3 | import createLoading from 'dva-loading';
4 |
5 | const app = dva({
6 | history: window.g_history,
7 | });
8 | window.g_app = app;
9 | app.use(createLoading());
10 |
11 | app.model({ ...require('../../pages/users/models/users.js').default });
12 |
13 | class DvaContainer extends Component {
14 | render() {
15 | app.router(() => this.props.children);
16 | return app.start()();
17 | }
18 | }
19 |
20 | export default DvaContainer;
21 |
--------------------------------------------------------------------------------
/examples/user-dashboard/src/pages/.umi/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | if ('serviceWorker' in navigator) {
2 | window.addEventListener('load', () => {
3 | navigator.serviceWorker
4 | .register(`${process.env.BASE_URL || ''}service-worker.js`)
5 | .then(reg => {})
6 | .catch(e => {});
7 | });
8 | }
9 |
--------------------------------------------------------------------------------
/examples/user-dashboard/src/pages/.umi/router.js:
--------------------------------------------------------------------------------
1 | import { Router as DefaultRouter, Route, Switch } from 'react-router-dom';
2 | import dynamic from 'umi/dynamic';
3 | import('/Users/chencheng/Documents/Work/Misc/dva/packages/dva-example-user-dashboard/src/global.css');
4 | import Layout from '/Users/chencheng/Documents/Work/Misc/dva/packages/dva-example-user-dashboard/src/layouts/index.js';
5 |
6 | const Router = window.g_CustomRouter || DefaultRouter;
7 |
8 | export default function() {
9 | return (
10 |
10 |
12 | {children}
11 |
7 |
20 | );
21 | }
22 |
23 | export default IndexPage;
24 |
--------------------------------------------------------------------------------
/examples/user-dashboard/src/pages/users/components/Users/UserModal.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Modal, Form, Input } from 'antd';
3 |
4 | const FormItem = Form.Item;
5 |
6 | class UserEditModal extends Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | visible: false,
11 | };
12 | }
13 |
14 | showModelHandler = e => {
15 | if (e) e.stopPropagation();
16 | this.setState({
17 | visible: true,
18 | });
19 | };
20 |
21 | hideModelHandler = () => {
22 | this.setState({
23 | visible: false,
24 | });
25 | };
26 |
27 | okHandler = () => {
28 | const { onOk } = this.props;
29 | this.props.form.validateFields((err, values) => {
30 | if (!err) {
31 | onOk(values);
32 | this.hideModelHandler();
33 | }
34 | });
35 | };
36 |
37 | render() {
38 | const { children } = this.props;
39 | const { getFieldDecorator } = this.props.form;
40 | const { name, email, website } = this.props.record;
41 | const formItemLayout = {
42 | labelCol: { span: 6 },
43 | wrapperCol: { span: 14 },
44 | };
45 |
46 | return (
47 |
48 | {children}
49 | Yay! Welcome to dva!
8 | 9 |-
10 |
-
11 | To get started, edit
src/index.jsand save to reload. 12 |
13 | - 14 | 15 | Getting Started 16 | 17 | 18 |
78 |
79 | record.id}
89 | pagination={false}
90 | />
91 |
80 |
81 |
82 |
83 |
84 |