![](\"https://zos.alipayobjects.com/rmsportal/PPrerEAKbIoDZYr.png\")
\n\n## Models\n\n### State\n\n`type State = any`\n\nThe state tree of your models. Usually, the state is a JavaScript object (although technically it can be any type) which is immutable data.\n\nIn dva, you can access top state tree data by `_store`.\n\n```javascript\nconst app = dva();\nconsole.log(app._store); // top state\n```\n\n### Action\n\n`type AsyncAction = any`\n\nJust like Redux's Action, in dva, action is a plain object that represents an intention to change the state. Actions are the only way to get data into the store. Any data, whether from UI events, network callbacks, or other sources such as WebSockets needs to eventually be dispatched as actions.action. (PS: dispatch is realized through props by connecting components.)\n\n```javascript\ndispatch({\n type: 'add',\n});\n```\n\n### dispatch function\n\n`type dispatch = (a: Action) => Action`\n\nA dispatching function (or simply dispatch function) is a function that accepts an action or an async action; it then may or may not dispatch one or more actions to the store.\n\nDispatching function is a function for triggering action, action is the only way to change state, but it just describes an action. while dispatch can be regarded as a way to trigger this action, and Reducer is to describe how to change state.\n\n```javascript\ndispatch({\n type: 'user/add', // if in model outside, need to add namespace\n payload: {},\n});\n```\n\n### Reducer\n\n`type Reducer\n ![](\"https://zos.alipayobjects.com/rmsportal/iYdclktvqzUHGBe.gif\")
\n
\n
\n );\n};\n```\n\nNotice:\n\n1. `import styles from './index.less';`, and then use `styles.xxx` to define css classname is the solution of [css-modules](https://github.com/css-modules/css-modules)\n2. Two props are passed in，`count` and `dispatch`. `count` is the state in the model, which is bound with [connect](https://redux.js.org/docs/api/bindActionCreators.html). `dispatch` is used to trigger an action.\n3. `dispatch({type: 'count/add'})` means trigger an action `{type: 'count/add'}`. View [Actions@redux.js.org](http://redux.js.org/basics/Actions.html) on what an action is.\n\n## Update state\n\n`reducer` is the only one that can update state. This makes our app stable, as all data modifications are traceable. `reducer` is a pure function, and accepts two arguments - `state` and an `action`, and returns a new `state`.\n\n```javascript\n(state, action) => newState\n```\n\nWe need two reducers, `add` and `minus`. Please note that `add` will only be recorded if it is the highest.\n\n> Note: `add` and `minus` don't need to add namespace prefixes in `count` model. But if it is outside the model, the action must prefix the namespace separated with `/`. e.g. `count/add`.\n\n```diff\napp.model({\n namespace: 'count',\n state: {\n record: 0,\n current: 0,\n },\n+ reducers: {\n+ add(state) {\n+ const newCurrent = state.current + 1;\n+ return { ...state,\n+ record: newCurrent > state.record ? newCurrent : state.record,\n+ current: newCurrent,\n+ };\n+ },\n+ minus(state) {\n+ return { ...state, current: state.current - 1};\n+ },\n+ },\n});\n```\n\nNote:\n\n1. Confused with the `...` [spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) operator? It's used to extend an Object, similar to `Object.extend`\n2. `add(state) {}` is equal to `add: function(state) {}`\n\n## Bind Data\n\n> Remember `count` and `dispatch` props used in the Component before? Where do they come from?\n\nAfter defining Model and Component, we need to connect them together. After connecting them, the Component can use the data from Model, and Model can receive actions dispatched from Component.\n\nIn this task, we only need to bind `count` .\n\n```javascript\nfunction mapStateToProps(state) {\n return { count: state.count };\n}\nconst HomePage = connect(mapStateToProps)(CountApp);\n```\n\nNote: `connect` is from [react-redux](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)。\n\n## Define Router\n\n> Which Component should be rendered after receiving a url? It's defined by the router.\n\nThis app has only one page, so we don't need to modify the router part.\n\n```javascript\napp.router(({history}) =>\n Highest Record: {count.record}
\n {count.current}
\n \n \n
\n \n ![](\"https://zos.alipayobjects.com/rmsportal/EJWakirNlogUSSU.gif\")
\n
\n ![](\"https://zos.alipayobjects.com/rmsportal/oMiYwVUzcIAgLei.png\")
\n
\n
\n );\n};\n```\n\nNote:\n\n1. `*add() {}` is equal to `add: function*(){}`\n2. `call` and `put` are effect commands from redux-saga. `call` is for async logic, and `put` is for dispatching actions. Besides these, there are commands such as `select`, `take`, `fork`, `cancel`, and so on. View more on [redux-saga documatation](http://redux-saga.github.io/redux-saga/docs/basics/DeclarativeEffects.html)\n\nRefresh you browser, and if successful, it should have all the effects of the beginning gif.\n\n## Subscribe Keyboard Event\n\n> After implementing the mouse click speed test, how do you implement the keyboard click speed test?\n\nThere is a concept called `Subscription` from dva, which is from [elm 0.17](http://elm-lang.org/blog/farewell-to-frp).\n\nSubscription is used to subscribe to a data source, then dispatch an action if needed. The data source could be current time, a websocket connection from server, a keyboard input, a geolocation change, a history router change, etc.\n\nThe subscription takes place in the model.\n\n```diff\n+import key from 'keymaster';\n...\napp.model({\n namespace: 'count',\n+ subscriptions: {\n+ keyboardWatcher({ dispatch }) {\n+ key('⌘+up, ctrl+up', () => { dispatch({type:'addThenMinus'}) });\n+ },\n+ },\n});\n```\n\nHere, we don't need to install the `keymaster` dependency manually. When we write `import key from 'keymaster';` and save, dva-cli will install `keymaster` and save to `package.json`. The output looks like this:\n\n```bash\nuse npm: tnpm\nInstalling `keymaster`...\n[keymaster@*] installed at node_modules/.npminstall/keymaster/1.6.2/keymaster (1 packages, use 745ms, speed 24.06kB/s, json 2.98kB, tarball 15.08kB)\nAll packages installed (1 packages installed from npm registry, use 755ms, speed 23.93kB/s, json 1(2.98kB), tarball 15.08kB)\n📦 2/2 build modules\nwebpack: bundle build is now finished.\n```\n\n## All Code Together\n\nindex.js\n\n```javascript\nimport dva, { connect } from 'dva';\nimport { Router, Route } from 'dva/router';\nimport React from 'react';\nimport styles from './index.less';\nimport key from 'keymaster';\n\nconst app = dva();\n\napp.model({\n namespace: 'count',\n state: {\n record: 0,\n current: 0,\n },\n reducers: {\n add(state) {\n const newCurrent = state.current + 1;\n return { ...state,\n record: newCurrent > state.record ? newCurrent : state.record,\n current: newCurrent,\n };\n },\n minus(state) {\n return { ...state, current: state.current - 1};\n },\n },\n effects: {\n *addThenMinus(action, { call, put }) {\n yield put({ type: 'add' });\n yield call(delay, 1000);\n yield put({ type: 'minus' });\n },\n },\n subscriptions: {\n keyboardWatcher({ dispatch }) {\n key('⌘+up, ctrl+up', () => { dispatch({type:'addThenMinus'}) });\n },\n },\n});\n\nconst CountApp = ({count, dispatch}) => {\n return (\n Highest Record: {count.record}
\n {count.current}
\n \n- \n+ \n
\n \n
\n );\n};\n\nfunction mapStateToProps(state) {\n return { count: state.count };\n}\nconst HomePage = connect(mapStateToProps)(CountApp);\n\napp.router(({history}) =>\n Highest Record: {count.record}
\n {count.current}
\n \n \n
\n ![](\"https://gw.alipayobjects.com/zos/rmsportal/jPXcQOlGLnylGMfrKdBz.jpg\")
| ![](\"https://img.alicdn.com/tfs/TB13U6aF6DpK1RjSZFrXXa78VXa-752-974.jpg\")
|\n[https://t.me/joinchat/G0DdHw9tDZC-_NmdKY2jYg](https://t.me/joinchat/G0DdHw9tDZC-_NmdKY2jYg)\n"
},
{
"path": "docs/api/README.md",
"content": "---\nsidebarDepth: 2\n---\n\n# API\n\n## 输出文件\n\n### dva\n\n默认输出文件。\n\n### dva/router\n\n默认输出 [react-router](https://github.com/ReactTraining/react-router) 接口， [react-router-redux](https://github.com/reactjs/react-router-redux) 的接口通过属性 routerRedux 输出。\n\n比如：\n\n```js\nimport { Router, Route, routerRedux } from 'dva/router';\n```\n\n### dva/fetch\n\n异步请求库，输出 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) 的接口。不和 dva 强绑定，可以选择任意的请求库。\n\n### dva/saga\n\n输出 [redux-saga](https://github.com/yelouafi/redux-saga) 的接口，主要用于用例的编写。（用例中需要用到 effects）\n\n### dva/dynamic\n\n解决组件动态加载问题的 util 方法。\n\n比如：\n\n```js\nimport dynamic from 'dva/dynamic';\n\nconst UserPageComponent = dynamic({\n app,\n models: () => [\n import('./models/users'),\n ],\n component: () => import('./routes/UserPage'),\n});\n```\n\n`opts` 包含：\n\n* app: dva 实例，加载 models 时需要\n* models: 返回 Promise 数组的函数，Promise 返回 dva model\n* component：返回 Promise 的函数，Promise 返回 React Component\n\n## dva API\n\n### `app = dva(opts)`\n\n创建应用，返回 dva 实例。(注：dva 支持多实例)\n\n`opts` 包含：\n\n* `history`：指定给路由用的 history，默认是 `hashHistory`\n* `initialState`：指定初始数据，优先级高于 model 中的 state，默认是 `{}`\n\n如果要配置 history 为 `browserHistory`，可以这样：\n\n```js\nimport createHistory from 'history/createBrowserHistory';\nconst app = dva({\n history: createHistory(),\n});\n```\n\n另外，出于易用性的考虑，`opts` 里也可以配所有的 [hooks](#appusehooks) ，下面包含全部的可配属性：\n\n```js\nconst app = dva({\n history,\n initialState,\n onError,\n onAction,\n onStateChange,\n onReducer,\n onEffect,\n onHmr,\n extraReducers,\n extraEnhancers,\n});\n```\n\n### `app.use(hooks)`\n\n配置 hooks 或者注册插件。（插件最终返回的是 hooks ）\n\n比如注册 [dva-loading](https://github.com/dvajs/dva-loading) 插件的例子：\n\n```js\nimport createLoading from 'dva-loading';\n...\napp.use(createLoading(opts));\n```\n\n`hooks` 包含：\n\n#### `onError((err, dispatch) => {})`\n\n`effect` 执行错误或 `subscription` 通过 `done` 主动抛错时触发，可用于管理全局出错状态。\n\n注意：`subscription` 并没有加 `try...catch`，所以有错误时需通过第二个参数 `done` 主动抛错。例子：\n\n```js\napp.model({\n subscriptions: {\n setup({ dispatch }, done) {\n done(e);\n },\n },\n});\n```\n\n如果我们用 antd，那么最简单的全局错误处理通常会这么做：\n\n```js\nimport { message } from 'antd';\nconst app = dva({\n onError(e) {\n message.error(e.message, /* duration */3);\n },\n});\n```\n\n#### `onAction(fn | fn[])`\n\n在 action 被 dispatch 时触发，用于注册 redux 中间件。支持函数或函数数组格式。\n\n例如我们要通过 [redux-logger](https://github.com/evgenyrodionov/redux-logger) 打印日志：\n\n```js\nimport createLogger from 'redux-logger';\nconst app = dva({\n onAction: createLogger(opts),\n});\n```\n\n#### `onStateChange(fn)`\n\n`state` 改变时触发，可用于同步 `state` 到 localStorage，服务器端等。\n\n#### `onReducer(fn)`\n\n封装 reducer 执行。比如借助 [redux-undo](https://github.com/omnidan/redux-undo) 实现 redo/undo ：\n\n```js\nimport undoable from 'redux-undo';\nconst app = dva({\n onReducer: reducer => {\n return (state, action) => {\n const undoOpts = {};\n const newState = undoable(reducer, undoOpts)(state, action);\n // 由于 dva 同步了 routing 数据，所以需要把这部分还原\n return { ...newState, routing: newState.present.routing };\n },\n },\n});\n```\n\n#### `onEffect(fn)`\n\n封装 effect 执行。比如 [dva-loading](https://github.com/dvajs/dva-loading) 基于此实现了自动处理 loading 状态。\n\n#### `onHmr(fn)`\n\n热替换相关，目前用于 [babel-plugin-dva-hmr](https://github.com/dvajs/babel-plugin-dva-hmr) 。\n\n#### `extraReducers`\n\n指定额外的 reducer，比如 [redux-form](https://github.com/erikras/redux-form) 需要指定额外的 `form` reducer：\n\n```js\nimport { reducer as formReducer } from 'redux-form'\nconst app = dva({\n extraReducers: {\n form: formReducer,\n },\n});\n```\n\n#### `extraEnhancers`\n\n指定额外的 [StoreEnhancer](https://github.com/reactjs/redux/blob/master/docs/Glossary.md#store-enhancer) ，比如结合 [redux-persist](https://github.com/rt2zz/redux-persist) 的使用：\n\n```js\nimport { persistStore, autoRehydrate } from 'redux-persist';\nconst app = dva({\n extraEnhancers: [autoRehydrate()],\n});\npersistStore(app._store);\n```\n\n### `app.model(model)`\n\n注册 model，详见 [#Model](#model) 部分。\n\n### `app.unmodel(namespace)`\n\n取消 model 注册，清理 reducers, effects 和 subscriptions。subscription 如果没有返回 unlisten 函数，使用 `app.unmodel` 会给予警告⚠️。\n\n### `app.replaceModel(model)`\n\n> 只在app.start()之后可用\n\n替换model为新model，清理旧model的reducers, effects 和 subscriptions，但会保留旧的state状态，对于HMR非常有用。subscription 如果没有返回 unlisten 函数，使用 `app.unmodel` 会给予警告⚠️。 \n\n如果原来不存在相同namespace的model，那么执行`app.model`操作\n\n### `app.router(({ history, app }) => RouterConfig)`\n\n注册路由表。\n\n通常是这样的：\n\n```js\nimport { Router, Route } from 'dva/router';\napp.router(({ history }) => {\n return (\n ![](\"https://zos.alipayobjects.com/rmsportal/psagSCVHOKQVqqNjjMdf.jpg\")
\n"
},
{
"path": "docs/guide/concepts.md",
"content": "---\nsidebarDepth: 2\n---\n\n# Dva 概念\n\n## 数据流向\n\n数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 `dispatch` 发起一个 action，如果是同步行为会直接通过 `Reducers` 改变 `State` ，如果是异步行为（副作用）会先触发 `Effects` 然后流向 `Reducers` 最终改变 `State`，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）。\n\n\n\n## Models\n\n### State\n\n`type State = any`\n\nState 表示 Model 的状态数据，通常表现为一个 javascript 对象（当然它可以是任何值）；操作的时候每次都要当作不可变数据（immutable data）来对待，保证每次都是全新对象，没有引用关系，这样才能保证 State 的独立性，便于测试和追踪变化。\n\n在 dva 中你可以通过 dva 的实例属性 `_store` 看到顶部的 state 数据，但是通常你很少会用到:\n\n```javascript\nconst app = dva();\nconsole.log(app._store); // 顶部的 state 数据\n```\n\n### Action\n\n`type AsyncAction = any`\n\nAction 是一个普通 javascript 对象，它是改变 State 的唯一途径。无论是从 UI 事件、网络回调，还是 WebSocket 等数据源所获得的数据，最终都会通过 dispatch 函数调用一个 action，从而改变对应的数据。action 必须带有 `type` 属性指明具体的行为，其它字段可以自定义，如果要发起一个 action 需要使用 `dispatch` 函数；需要注意的是 `dispatch` 是在组件 connect Models以后，通过 props 传入的。\n```\ndispatch({\n type: 'add',\n});\n```\n\n### dispatch 函数\n\n`type dispatch = (a: Action) => Action`\n\ndispatching function 是一个用于触发 action 的函数，action 是改变 State 的唯一途径，但是它只描述了一个行为，而 dipatch 可以看作是触发这个行为的方式，而 Reducer 则是描述如何改变数据的。\n\n在 dva 中，connect Model 的组件通过 props 可以访问到 dispatch，可以调用 Model 中的 Reducer 或者 Effects，常见的形式如：\n\n```javascript\ndispatch({\n type: 'user/add', // 如果在 model 外调用，需要添加 namespace\n payload: {}, // 需要传递的信息\n});\n```\n\n### Reducer\n\n`type Reducer\n> 原文链接：[https://yuque.com/flying.ni/the-tower/tvzasn](https://yuque.com/flying.ni/the-tower/tvzasn)\n\n## 示例背景\n\n最常见的 Web 类示例之一: TodoList = Todo list + Add todo button\n\n## 图解一: React 表示法\n\n![图片.png | left | 747x518](https://cdn.yuque.com/yuque/0/2018/png/103904/1528436560812-2586a0b5-7a6a-4a07-895c-f822fa85d5de.png \"\")\n\n按照 React 官方指导意见, 如果多个 Component 之间要发生交互, 那么状态(即: 数据)就维护在这些 Component 的最小公约父节点上, 也即是 `
List of Products
\n);\n\nexport default Products;\n```\n\n添加路由信息到路由表，编辑 `router.js` :\n\n```diff\n+ import Products from './routes/Products';\n...\n+` 标签。\n\n## 编写 UI Component\n\n随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，在 dva 里你可以把这部分抽成 component 。\n\n我们来编写一个 `ProductList` component，这样就能在不同的地方显示产品列表了。\n\n新建 `components/ProductList.js` 文件：\n\n```javascript\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { Table, Popconfirm, Button } from 'antd';\n\nconst ProductList = ({ onDelete, products }) => {\n const columns = [{\n title: 'Name',\n dataIndex: 'name',\n }, {\n title: 'Actions',\n render: (text, record) => {\n return (\n onDelete(record.id)}>\n \n \n );\n },\n }];\n return (\n List of Products
\n
List of Products
\n\n ![](\"https://zos.alipayobjects.com/rmsportal/GQJeDDeUCSTRMMg.gif\")
\n
\n
;\n }\n}\n\nReactDOM.render(这里显示 Son 组件的内容
\n\n \n
;\n }\n}\n\nReactDOM.render(这里显示 Son 组件的内容：{this.state.son}
\nHello dva
;\n\n// 创建应用\nconst app = dva();\n// 注册视图\napp.router(() => ![](\"https://zos.alipayobjects.com/rmsportal/hUFIivoOFjVmwNXjjfPE.png\")
\n\n## 核心概念 \n* State：一个对象，保存整个应用状态\n* View：React 组件构成的视图层\n* Action：一个对象，描述事件 \n* connect 方法：一个函数，绑定 State 到 View\n* dispatch 方法：一个函数，发送 Action 到 State\n\n## State 和 View\nState 是储存数据的地方，收到 Action 以后，会更新数据。\n\nView 就是 React 组件构成的 UI 层，从 State 取数据后，渲染成 HTML 代码。只要 State 有变化，View 就会自动更新。\n\n## Action\nAction 是用来描述 UI 层事件的一个对象。\n\n```js\n{\n type: 'click-submit-button',\n payload: this.form.data\n}\n```\n\n## connect 方法\n\nconnect 是一个函数，绑定 State 到 View。\n\n```js\nimport { connect } from 'dva';\n\nfunction mapStateToProps(state) {\n return { todos: state.todos };\n}\nconnect(mapStateToProps)(App);\n```\n\nconnect 方法返回的也是一个 React 组件，通常称为容器组件。因为它是原始 UI 组件的容器，即在外面包了一层 State。\n\nconnect 方法传入的第一个参数是 mapStateToProps 函数，mapStateToProps 函数会返回一个对象，用于建立 State 到 Props 的映射关系。\n\n## dispatch 方法\ndispatch 是一个函数方法，用来将 Action 发送给 State。\n\n```js\ndispatch({\n type: 'click-submit-button',\n payload: this.form.data\n})\n```\n\ndispatch 方法从哪里来？被 connect 的 Component 会自动在 props 中拥有 dispatch 方法。\n\n> connect 的数据从哪里来? \n\n## dva 应用的最简结构（带 model)\n```js\n// 创建应用\nconst app = dva();\n\n// 注册 Model\napp.model({\n namespace: 'count',\n state: 0,\n reducers: {\n add(state) { return state + 1 },\n },\n effects: {\n *addAfter1Second(action, { call, put }) {\n yield call(delay, 1000);\n yield put({ type: 'add' });\n },\n },\n});\n\n// 注册视图\napp.router(() => ![](\"https://zos.alipayobjects.com/rmsportal/cyzvnIrRhJGOiLliwhcZ.png\")
\n\n## 数据流图 2\n\n![](\"https://zos.alipayobjects.com/rmsportal/pHTYrKJxQHPyJGAYOzMu.png\")
\n\n## app.model\n\ndva 提供 app.model 这个对象，所有的应用逻辑都定义在它上面。\n\n```js\nconst app = dva();\n\n// 新增这一行\napp.model({ /**/ });\n\napp.router(() => ![](\"https://zos.alipayobjects.com/rmsportal/qEVcuGVcKMGjlUNghHel.gif\")
\n"
},
{
"path": "docs/guide/source-code-explore.md",
"content": "# Dva 源码解析\n\n> 作者：杨光\n\n## 隐藏在 package.json 里的秘密\n\n随便哪个 dva 的项目，只要敲入 npm start 就可以运行启动。之前敲了无数次我都没有在意，直到我准备研究源码的时候才意识到：**在敲下这行命令的时候，到底发生了什么呢？**\n\n答案要去 package.json 里去寻找。\n\n>有位技术大牛曾经告诉过我：看源码之前，先去看 package.json 。看看项目的入口文件，翻翻它用了哪些依赖，对项目便有了大致的概念。\n\npackage.json 里是这么写的：\n\n```json\n \"scripts\": {\n \"start\": \"roadhog server\"\n },\n```\n\n翻翻依赖，`\"roadhog\": \"^0.5.2\"`。\n\n\n既然能在 devDependencies 找到，那么肯定也能在 [npm](https://www.npmjs.com/package/roadhog) 上找到。原来是个和 webpack 相似的库，而且作者看着有点眼熟...\n\n如果说 dva 是亲女儿，那 [roadhog](https://github.com/sorrycc/roadhog.git) 就是亲哥哥了，起的是 webpack 自动打包和热更替的作用。\n\n在 roadhog 的默认配置里有这么一条信息：\n\n```json\n{\n \"entry\": \"src/index.js\",\n}\n```\n\n后转了一圈，启动的入口回到了 `src/index.js`。\n\n## `src/index.js`\n\n在 `src/index.js` 里，dva 一共做了这么几件事：\n\n0. 从 'dva' 依赖中引入 dva ：`import dva from 'dva'`; \n\n1. 通过函数生成一个 app 对象：`const app = dva()`; \n\n2. 加载插件：`app.use({})`;\n\n3. 注入 model：`app.model(require('./models/example'))`;\n\n4. 添加路由：`app.router(require('./routes/indexAnother'))`;\n\n5. 启动：app.start('#root');\n\n在这 6 步当中，dva 完成了 `使用 React 解决 view 层`、`redux 管理 model `、`saga 解决异步`的主要功能。事实上在我查阅资料以及回忆用过的脚手架时，发现目前端框架之所以被称为“框架”也就是解决了这些事情。前端工程师至今所做的事情都是在 **分离动态的 data 和静态的 view** ，只不过侧重点和实现方式也不同。\n\n至今为止出了这么多框架，但是前端 MVX 的思想一直都没有改变。\n\n# dva \n\n## 寻找 “dva”\n\n既然 dva 是来自于 `dva`，那么 dva 是什么这个问题自然要去 dva 的[源码](https://github.com/dvajs/dva)中寻找了。\n\n> 剧透：dva 是个函数，返回一了个 app 的对象。\n\n> 剧透2：目前 dva 的源码核心部分包含两部分，`dva` 和 `dva-core`。前者用高阶组件 React-redux 实现了 view 层，后者是用 redux-saga 解决了 model 层。\n\n老规矩，还是先翻 package.json 。\n\n引用依赖很好的说明了 dva 的功能：统一 view 层。\n\n```json\n// dva 使用的依赖如下：\n\n \"babel-runtime\": \"^6.26.0\", // 一个编译后文件引用的公共库，可以有效减少编译后的文件体积\n \"dva-core\": \"^1.1.0\", // dva 另一个核心，用于处理数据层\n \"global\": \"^4.3.2\", // 用于提供全局函数的引用\n \"history\": \"^4.6.3\", // browserHistory 或者 hashHistory\n \"invariant\": \"^2.2.2\", // 一个有趣的断言库\n \"isomorphic-fetch\": \"^2.2.1\", // 方便请求异步的函数，dva 中的 fetch 来源\n \"react-async-component\": \"^1.0.0-beta.3\", // 组件懒加载\n \"react-redux\": \"^5.0.5\", // 提供了一个高阶组件，方便在各处调用 store\n \"react-router-dom\": \"^4.1.2\", // router4，终于可以像写组件一样写 router 了\n \"react-router-redux\": \"5.0.0-alpha.6\",// redux 的中间件，在 provider 里可以嵌套 router\n \"redux\": \"^3.7.2\" // 提供了 store、dispatch、reducer \n\t\n```\n不过 script 没有给太多有用的信息，因为 `ruban build` 中的 `ruban` 显然是个私人库(虽然在 tnpm 上可以查到但是也是私人库)。但根据惯例，应该是 dva 包下的 `index.js` 文件提供了对外调用：\n```js\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nexports.default = require('./lib');\nexports.connect = require('react-redux').connect;\n```\n\n显然这个 `exports.default` 就是我们要找的 dva，但是源码中没有 `./lib` 文件夹。当然直接看也应该看不懂，因为一般都是使用 babel 的命令 `babel src -d libs` 进行编译后生成的，所以直接去看 `src/index.js` 文件。\n\n\n## `src/index.js`\n\n`src/index.js`[在此](https://github.com/dvajs/dva/blob/master/packages/dva/src/index.js) ：\n\n在这里，dva 做了三件比较重要的事情：\n\n1. 使用 call 给 dva-core 实例化的 app(这个时候还只有数据层) 的 start 方法增加了一些新功能（或者说，通过代理模式给 model 层增加了 view 层）。\n2. 使用 react-redux 完成了 react 到 redux 的连接。\n3. 添加了 redux 的中间件 react-redux-router，强化了 history 对象的功能。\n\n### 使用 call 方法实现代理模式\n\ndva 中实现代理模式的方式如下：\n\n**1. 新建 function ，函数内实例化一个 app 对象。**\n**2. 新建变量指向该对象希望代理的方法， `oldStart = app.start`。**\n**3. 新建同名方法 start，在其中使用 call，指定 oldStart 的调用者为 app。**\n**4. 令 app.start = start，完成对 app 对象的 start 方法的代理。**\n\n上代码:\n\n```js\nexport default function(opts = {}) {\n\n // ...初始化 route ，和添加 route 中间件的方法。\n\n /**\n * 1. 新建 function ，函数内实例化一个 app 对象。\n * \n */\n const app = core.create(opts, createOpts);\n /**\n * 2. 新建变量指向该对象希望代理的方法\n * \n */\n const oldAppStart = app.start;\n app.router = router;\n /**\n * 4. 令 app.start = start，完成对 app 对象的 start 方法的代理。\n * @type {[type]}\n */\n app.start = start;\n return app;\n\n // router 赋值\n\n /**\n * 3.1 新建同名方法 start，\n * \n */\n function start(container) {\n // 合法性检测代码\n\n /**\n * 3.2 在其中使用 call，指定 oldStart 的调用者为 app。\n */\n oldAppStart.call(app);\n\t\n\t// 因为有 3.2 的执行才有现在的 store\n const store = app._store;\n\n\t// 使用高阶组件创建视图\n }\n}\n``` \n\n> 为什么不直接在 start 方式中 oldAppStart ?\n- 因为 dva-core 的 start 方法里有用到 this，不用 call 指定调用者为 app 的话，oldAppStart() 会找错对象。\n\n> 实现代理模式一定要用到 call 吗？\n- 不一定，看有没有 使用 this 或者代理的函数是不是箭头函数。从另一个角度来说，如果使用了 function 关键字又在内部使用了 this，那么一定要用 call/apply/bind 指定 this。\n\n> 前端还有那里会用到 call ？\n- 就实际开发来讲，因为已经使用了 es6 标准，基本和 this 没什么打交道的机会。使用 class 类型的组件中偶尔还会用到 this.xxx.bind(this)，stateless 组件就洗洗睡吧(因为压根没有 this)。如果实现代理，可以使用继承/反向继承的方法 —— 比如高阶组件。\n\n\n### 使用 react-redux 的高阶组件传递 store\n\n经过 call 代理后的 start 方法的主要作用，便是使用 react-redux 的 provider 组件将数据与视图联系了起来，生成 React 元素呈现给使用者。\n\n不多说，上代码。\n\n```js\n// 使用 querySelector 获得 dom\nif (isString(container)) {\n container = document.querySelector(container);\n invariant(\n container,\n `[app.start] container ${container} not found`,\n );\n}\n\n// 其他代码\n\n// 实例化 store\noldAppStart.call(app); \nconst store = app._store;\n\n// export _getProvider for HMR\n// ref: https://github.com/dvajs/dva/issues/469\napp._getProvider = getProvider.bind(null, store, app);\n\n// If has container, render; else, return react component\n// 如果有真实的 dom 对象就把 react 拍进去\nif (container) {\n render(container, store, app, app._router);\n // 热加载在这里\n app._plugin.apply('onHmr')(render.bind(null, container, store, app));\n} else {\n // 否则就生成一个 react ，供外界调用\n return getProvider(store, this, this._router);\n}\n \n // 使用高阶组件包裹组件\nfunction getProvider(store, app, router) {\n return extraProps => (\n ${props.name}
\n}\n```\n\n等同于：\n\n```javascript\nclass App extends React.Component {\n handleClick() {\n this.props.dispatch({ type: 'app/create' });\n }\n render() {\n return ${this.props.name}
\n }\n}\n```\n\n### JSX\n\n#### Component 嵌套\n\n类似 HTML，JSX 里可以给组件添加子组件。\n\n```html\nHello dva
\n```\n\n#### JavaScript 表达式\n\nJavaScript 表达式需要用 `{}` 括起来，会执行并返回结果。\n\n比如：\n\n```javascript\n{ this.props.title }
\n```\n\n#### Mapping Arrays to JSX\n\n可以把数组映射为 JSX 元素列表。\n\n```javascript\n- \n { this.props.todos.map((todo, i) =>
- {todo} ) }\n
\n {/* multiline comment */}\n {/*\n multi\n line\n comment\n */}\n {\n // single line\n }\n Hello\n
\n```\n\n#### Spread Attributes\n\n这是 JSX 从 ECMAScript6 借鉴过来的很有用的特性，用于扩充组件 props 。\n\n比如：\n\n```javascript\nconst attrs = {\n href: 'http://example.org',\n target: '_blank',\n};\nHello\n```\n\n等同于\n\n```javascript\nconst attrs = {\n href: 'http://example.org',\n target: '_blank',\n};\nHello\n```\n\n### Props\n\n数据处理在 React 中是非常重要的概念之一，分别可以通过 props, state 和 context 来处理数据。而在 dva 应用里，你只需关心 props 。\n\n#### propTypes\n\nJavaScript 是弱类型语言，所以请尽量声明 propTypes 对 props 进行校验，以减少不必要的问题。\n\n```javascript\nfunction App(props) {\n return{props.name}
;\n}\nApp.propTypes = {\n name: React.PropTypes.string.isRequired,\n};\n```\n\n内置的 prop type 有：\n\n- PropTypes.array\n- PropTypes.bool\n- PropTypes.func\n- PropTypes.number\n- PropTypes.object\n- PropTypes.string\n\n#### 往下传数据\n\n\n\n#### 往上传数据\n\n\n\n### CSS Modules\n\n![](\"https://zos.alipayobjects.com/rmsportal/mHVRpjNYhVuFdsS.png\")
\n\n#### 理解 CSS Modules\n\n一张图理解 CSS Modules 的工作原理：\n\n\n\n`button` class 在构建之后会被重命名为 `ProductList_button_1FU0u` 。`button` 是 local name，而 `ProductList_button_1FU0u` 是 global name 。**你可以用简短的描述性名字，而不需要关心命名冲突问题。**\n\n然后你要做的全部事情就是在 css/less 文件里写 `.button {...}`，并在组件里通过 `styles.button` 来引用他。\n\n#### 定义全局 CSS\n\nCSS Modules 默认是局部作用域的，想要声明一个全局规则，可用 `:global` 语法。\n\n比如：\n\n```css\n.title {\n color: red;\n}\n:global(.title) {\n color: green;\n}\n```\n\n然后在引用的时候：\n\n```javascript\nExample
;\n};\n\nExample.propTypes = {};\n\nexport default Example;\n"
},
{
"path": "examples/func-test/src/index.css",
"content": "\nhtml, body, :global(#root) {\n height: 100%;\n}\n\n"
},
{
"path": "examples/func-test/src/index.ejs",
"content": "\n\n\n \n \n \n
\n );\n}\n\nIndexPage.propTypes = {};\n\nexport default connect()(IndexPage);\n"
},
{
"path": "examples/func-test/src/services/example.js",
"content": "import request from '../utils/request';\n\nexport async function query() {\n return request('/api/users');\n}\n"
},
{
"path": "examples/func-test/src/utils/request.js",
"content": "import fetch from 'dva/fetch';\n\nfunction parseJSON(response) {\n return response.json();\n}\n\nfunction checkStatus(response) {\n if (response.status >= 200 && response.status < 300) {\n return response;\n }\n\n const error = new Error(response.statusText);\n error.response = response;\n throw error;\n}\n\n/**\n * Requests a URL, returning a promise.\n *\n * @param {string} url The URL we want to request\n * @param {object} [options] The options we want to pass to \"fetch\"\n * @return {object} An object containing either \"data\" or \"err\"\n */\nexport default function request(url, options) {\n return fetch(url, options)\n .then(checkStatus)\n .then(parseJSON)\n .then(data => ({ data }))\n .catch(err => ({ err }));\n}\n"
},
{
"path": "examples/user-dashboard/.editorconfig",
"content": "# http://editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n\n[Makefile]\nindent_style = tab\n"
},
{
"path": "examples/user-dashboard/.eslintrc",
"content": "{\n \"extends\": \"umi\"\n}"
},
{
"path": "examples/user-dashboard/.gitignore",
"content": "dist\nnode_modules\n.DS_Store\n\n.idea/\n"
},
{
"path": "examples/user-dashboard/.umirc.js",
"content": "export default {\n plugins: ['umi-plugin-dva'],\n};\n"
},
{
"path": "examples/user-dashboard/.webpackrc",
"content": "{\n \"theme\": {\n \"@primary-color\": \"#dc6aac\",\n \"@link-color\": \"#dc6aac\",\n \"@border-radius-base\": \"2px\",\n \"@font-size-base\": \"16px\",\n \"@line-height-base\": \"1.2\"\n },\n \"proxy\": {\n \"/api\": {\n \"target\": \"http://jsonplaceholder.typicode.com/\",\n \"changeOrigin\": true,\n \"pathRewrite\": { \"^/api\" : \"\" }\n }\n }\n}\n"
},
{
"path": "examples/user-dashboard/README.md",
"content": "# dva-example-user-dashboard\n\n详见[《12 步 30 分钟，完成用户管理的 CURD 应用 (react+dva+antd)》](https://github.com/sorrycc/blog/issues/18)。\n\n---\n\nYay! Welcome to dva!
\n \n- \n
- \n To get started, edit
src/index.jsand save to reload.\n \n - \n \n Getting Started\n \n \n
\n ![](\"https://zos.alipayobjects.com/rmsportal/bmkNCEoluwGaeGjYjInf.png\")
\n
\n
\n );\n}\n\nexport default MainLayout;\n"
},
{
"path": "examples/user-dashboard/src/pages/index.css",
"content": "\n.normal {\n font-family: Georgia, sans-serif;\n margin-top: 3em;\n text-align: center;\n}\n\n.title {\n font-size: 2.5rem;\n font-weight: normal;\n letter-spacing: -1px;\n}\n\n.welcome {\n height: 328px;\n background: url(../assets/yay.jpg) no-repeat center 0;\n background-size: 388px 328px;\n}\n\n.list {\n font-size: 1.2em;\n margin-top: 1.8em;\n list-style: none;\n line-height: 1.5em;\n}\n\n.list code {\n background: #f7f7f7;\n}\n"
},
{
"path": "examples/user-dashboard/src/pages/index.js",
"content": "import React from 'react';\nimport styles from './index.css';\n\nfunction IndexPage() {\n return (\n \n
\n {children}
\n \n
\n );\n}\n\nexport default IndexPage;\n"
},
{
"path": "examples/user-dashboard/src/pages/users/components/Users/UserModal.js",
"content": "import React, { Component } from 'react';\nimport { Modal, Form, Input } from 'antd';\n\nconst FormItem = Form.Item;\n\nclass UserEditModal extends Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false,\n };\n }\n\n showModelHandler = e => {\n if (e) e.stopPropagation();\n this.setState({\n visible: true,\n });\n };\n\n hideModelHandler = () => {\n this.setState({\n visible: false,\n });\n };\n\n okHandler = () => {\n const { onOk } = this.props;\n this.props.form.validateFields((err, values) => {\n if (!err) {\n onOk(values);\n this.hideModelHandler();\n }\n });\n };\n\n render() {\n const { children } = this.props;\n const { getFieldDecorator } = this.props.form;\n const { name, email, website } = this.props.record;\n const formItemLayout = {\n labelCol: { span: 6 },\n wrapperCol: { span: 14 },\n };\n\n return (\n \n {children}\n Yay! Welcome to dva!
\n \n- \n
- \n To get started, edit
src/index.jsand save to reload.\n \n - \n \n Getting Started\n \n \n
\n
\n );\n}\n\nfunction mapStateToProps(state) {\n const { list, total, page } = state.users;\n return {\n loading: state.loading.models.users,\n list,\n total,\n page,\n };\n}\n\nexport default connect(mapStateToProps)(Users);\n"
},
{
"path": "examples/user-dashboard/src/pages/users/models/users.js",
"content": "import * as usersService from '../services/users';\n\nexport default {\n namespace: 'users',\n state: {\n list: [],\n total: null,\n page: null,\n },\n reducers: {\n save(state, { payload: { data: list, total, page } }) {\n return { ...state, list, total, page };\n },\n },\n effects: {\n *fetch({ payload: { page = 1 } }, { call, put }) {\n const { data, headers } = yield call(usersService.fetch, { page });\n yield put({\n type: 'save',\n payload: {\n data,\n total: parseInt(headers['x-total-count'], 10),\n page: parseInt(page, 10),\n },\n });\n },\n *remove({ payload: id }, { call, put }) {\n yield call(usersService.remove, id);\n yield put({ type: 'reload' });\n },\n *patch({ payload: { id, values } }, { call, put }) {\n yield call(usersService.patch, id, values);\n yield put({ type: 'reload' });\n },\n *create({ payload: values }, { call, put }) {\n yield call(usersService.create, values);\n yield put({ type: 'reload' });\n },\n *reload(action, { put, select }) {\n const page = yield select(state => state.users.page);\n yield put({ type: 'fetch', payload: { page } });\n },\n },\n subscriptions: {\n setup({ dispatch, history }) {\n return history.listen(({ pathname, query }) => {\n if (pathname === '/users') {\n dispatch({ type: 'fetch', payload: query });\n }\n });\n },\n },\n};\n"
},
{
"path": "examples/user-dashboard/src/pages/users/page.css",
"content": "\n.normal {\n width: 900px;\n margin: 3em auto 0;\n}\n"
},
{
"path": "examples/user-dashboard/src/pages/users/page.js",
"content": "import React from 'react';\nimport styles from './page.css';\nimport UsersComponent from './components/Users/Users';\n\nfunction Users() {\n return (\n \n record.id}\n pagination={false}\n />\n
\n \n \n \n \n
\n \n
\n );\n}\n\nexport default Users;\n"
},
{
"path": "examples/user-dashboard/src/pages/users/services/users.js",
"content": "import request from '../../../utils/request';\nimport { PAGE_SIZE } from '../../../constants';\n\nexport function fetch({ page }) {\n return request(`/api/users?_page=${page}&_limit=${PAGE_SIZE}`);\n}\n\nexport function remove(id) {\n return request(`/api/users/${id}`, {\n method: 'DELETE',\n });\n}\n\nexport function patch(id, values) {\n return request(`/api/users/${id}`, {\n method: 'PATCH',\n body: JSON.stringify(values),\n });\n}\n\nexport function create(values) {\n return request('/api/users', {\n method: 'POST',\n body: JSON.stringify(values),\n });\n}\n"
},
{
"path": "examples/user-dashboard/src/plugins/onError.js",
"content": "import { message } from 'antd';\n\nconst ERROR_MSG_DURATION = 3; // 3 秒\n\nexport default {\n onError(e) {\n message.error(e.message, ERROR_MSG_DURATION);\n },\n};\n"
},
{
"path": "examples/user-dashboard/src/utils/request.js",
"content": "import fetch from 'dva/fetch';\n\nfunction checkStatus(response) {\n if (response.status >= 200 && response.status < 300) {\n return response;\n }\n\n const error = new Error(response.statusText);\n error.response = response;\n throw error;\n}\n\n/**\n * Requests a URL, returning a promise.\n *\n * @param {string} url The URL we want to request\n * @param {object} [options] The options we want to pass to \"fetch\"\n * @return {object} An object containing either \"data\" or \"err\"\n */\nasync function request(url, options) {\n const response = await fetch(url, options);\n\n checkStatus(response);\n\n const data = await response.json();\n\n const ret = {\n data,\n headers: {},\n };\n\n if (response.headers.get('x-total-count')) {\n ret.headers['x-total-count'] = response.headers.get('x-total-count');\n }\n\n return ret;\n}\n\nexport default request;\n"
},
{
"path": "examples/with-immer/.umirc.js",
"content": "export default {\n plugins: ['umi-plugin-dva'],\n};\n"
},
{
"path": "examples/with-immer/dva.js",
"content": "import useImmer from 'dva-immer';\n\nexport function config() {\n return {\n ...useImmer(),\n };\n}\n"
},
{
"path": "examples/with-immer/model.js",
"content": "export default {\n namespace: 'count',\n state: {\n a: {\n b: {\n c: {\n count: 0,\n },\n },\n },\n },\n reducers: {\n add(state) {\n state.a.b.c.count += 1;\n },\n setNewProp(state) {\n state.newProp = 'hi new prop';\n },\n },\n};\n"
},
{
"path": "examples/with-immer/package.json",
"content": "{\n \"dependencies\": {\n \"umi\": \"*\",\n \"umi-plugin-dva\": \"*\",\n \"dva-immer\": \"*\"\n }\n}\n"
},
{
"path": "examples/with-immer/pages/index.js",
"content": "import { connect } from 'dva';\nimport { Button } from 'antd-mobile';\n\nfunction App({ count, newProp, dispatch }) {\n return (\n \n {\n dispatch({\n type: 'count/add',\n });\n }}\n >\n Add\n \n {\n dispatch({\n type: 'count/setNewProp',\n });\n }}\n >\n Set New Prop\n \n
\n );\n}\n\nfunction mapStateToProps(state) {\n return {\n count: state.count.a.b.c.count,\n newProp: state.count.newProp,\n };\n}\n\nexport default connect(mapStateToProps)(App);\n"
},
{
"path": "examples/with-nextjs/.babelrc",
"content": "{\n \"presets\": [\n \"next/babel\"\n ],\n \"plugins\": [\n [\"module-resolver\", {\n \"alias\": {\n \"dva\": \"dva-no-router\"\n }\n }]\n ]\n }"
},
{
"path": "examples/with-nextjs/.eslintignore",
"content": ".next/*\nnode_modules/*\n\n\n"
},
{
"path": "examples/with-nextjs/.eslintrc",
"content": "{\n \"parser\": \"babel-eslint\",\n \"extends\": \"airbnb\",\n \"settings\": {\n \"import/resolver\": {\n \"babel-module\": {\n \"alias\": {\n \"test\": \"./test\",\n \"underscore\": \"lodash\"\n }\n }\n }\n },\n \"rules\": {\n \"arrow-body-style\": [0],\n \"consistent-return\": [0],\n \"generator-star-spacing\": [0],\n \"global-require\": [1],\n \"import/extensions\": [0],\n \"import/no-extraneous-dependencies\": [0],\n \"import/no-unresolved\": [0],\n \"import/prefer-default-export\": [0],\n \"jsx-a11y/no-static-element-interactions\": [0],\n \"no-bitwise\": [0],\n \"no-cond-assign\": [0],\n \"no-else-return\": [0],\n \"no-nested-ternary\": [0],\n \"no-restricted-syntax\": [0],\n \"no-use-before-define\": [0],\n \"react/forbid-prop-types\": [0],\n \"react/jsx-filename-extension\": [1, { \"extensions\": [\".js\"] }],\n \"react/jsx-no-bind\": [0],\n \"react/prefer-stateless-function\": [0],\n \"react/prop-types\": [0],\n \"require-yield\": [1],\n \"react/react-in-jsx-scope\": [0],\n \"jsx-a11y/anchor-is-valid\": [0]\n },\n \"parserOptions\": {\n \"ecmaFeatures\": {\n \"experimentalObjectRestSpread\": true\n }\n }\n }"
},
{
"path": "examples/with-nextjs/.gitignore",
"content": "/node_modules/\n/.next/"
},
{
"path": "examples/with-nextjs/README.md",
"content": "# dva_next\ncompose dva.js with next.js\n\n1.install\n\n```\nnpm install\n```\n\n2.start\n\n```\nnpm start\n```\n"
},
{
"path": "examples/with-nextjs/model/homepage.js",
"content": "const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));\n\nconst model = {\n namespace: 'index',\n state: {\n name: 'hopperhuang',\n count: 0,\n init: false,\n },\n reducers: {\n caculate(state, payload) {\n const { count } = state;\n const { delta } = payload;\n return { ...state, count: count + delta };\n },\n },\n effects: {\n *init(action, { put }) {\n yield delay(2000);\n yield put({ type: 'caculate', delta: 1 });\n },\n },\n};\n\nexport default model;\n\n"
},
{
"path": "examples/with-nextjs/model/index.js",
"content": "import homepage from './homepage';\n\nconst model = [\n homepage,\n];\n\nexport default model;\n"
},
{
"path": "examples/with-nextjs/package.json",
"content": "{\n \"name\": \"dva-next.js\",\n \"version\": \"1.0.0\",\n \"description\": \"dva-next.js-example\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"start\": \"next\"\n },\n \"author\": \"hopperhuang\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"dva-no-router\": \"^1.0.3\",\n \"next\": \"^5.0.0\",\n \"react\": \"^16.2.0\",\n \"react-dom\": \"^16.2.0\"\n },\n \"devDependencies\": {\n \"babel-eslint\": \"^8.2.2\",\n \"babel-plugin-module-resolver\": \"^3.1.0\",\n \"eslint\": \"^4.19.1\",\n \"eslint-config-airbnb\": \"^16.1.0\",\n \"eslint-import-resolver-babel-module\": \"^4.0.0\",\n \"eslint-plugin-import\": \"^2.9.0\",\n \"eslint-plugin-jsx-a11y\": \"^6.0.3\",\n \"eslint-plugin-react\": \"^7.7.0\"\n }\n}\n"
},
{
"path": "examples/with-nextjs/pages/index.js",
"content": "\nimport Link from 'next/link';\nimport React from 'react';\nimport WithDva from '../utils/store';\n\nclass Page extends React.Component {\n static async getInitialProps(props) {\n // first time run in server side\n // other times run in client side ( client side init with default props\n // console.log('get init props');\n const {\n pathname, query, isServer, store,\n } = props;\n // dispatch effects to fetch data here\n await props.store.dispatch({ type: 'index/init' });\n return {\n // dont use store as property name, it will confilct with initial store\n pathname, query, isServer, dvaStore: store,\n };\n }\n\n render() {\n const { index } = this.props;\n const { name, count } = index;\n // console.log('rendered!!');\n return (\n \n );\n }\n}\n\nexport default WithDva((state) => { return { index: state.index }; })(Page);\n"
},
{
"path": "examples/with-nextjs/pages/users.js",
"content": "\nimport Link from 'next/link';\n\nexport default function () {\n return (\n Count: {count}
\nstate.newProp: {newProp || 'not setted'}
\n\n Users\n
\n \n \n Back\n \n \n
\n );\n}\n"
},
{
"path": "examples/with-nextjs/utils/store.js",
"content": "import React from 'react';\nimport dva, { connect } from 'dva-no-router';\nimport { Provider } from 'react-redux';\nimport model from '../model/index';\n\nconst checkServer = () => Object.prototype.toString.call(global.process) === '[object process]';\n\n// eslint-disable-next-line\nconst __NEXT_DVA_STORE__ = '__NEXT_DVA_STORE__'\n\nfunction createDvaStore(initialState) {\n let app;\n if (initialState) {\n app = dva({\n initialState,\n });\n } else {\n app = dva({});\n }\n const isArray = Array.isArray(model);\n if (isArray) {\n model.forEach((m) => {\n app.model(m);\n });\n } else {\n app.model(model);\n }\n app.router(() => {});\n app.start();\n // console.log(app);\n // eslint-disable-next-line\n const store = app._store\n return store;\n}\n\nfunction getOrCreateStore(initialState) {\n const isServer = checkServer();\n if (isServer) { // run in server\n // console.log('server');\n return createDvaStore(initialState);\n }\n // eslint-disable-next-line\n if (!window[__NEXT_DVA_STORE__]) {\n // console.log('client');\n // eslint-disable-next-line\n window[__NEXT_DVA_STORE__] = createDvaStore(initialState);\n }\n // eslint-disable-next-line\n return window[__NEXT_DVA_STORE__];\n}\n\nexport default function withDva(...args) {\n return function CreateNextPage(Component) {\n const ComponentWithDva = (props = {}) => {\n const { store, initialProps, initialState } = props;\n const ConnectedComponent = connect(...args)(Component);\n return React.createElement(\n Provider,\n // in client side, it will init store with the initial state tranfer from server side\n { store: store && store.dispatch ? store : getOrCreateStore(initialState) },\n // transfer next.js's props to the page\n React.createElement(ConnectedComponent, initialProps),\n );\n };\n ComponentWithDva.getInitialProps = async (props = {}) => {\n // console.log('get......');\n const isServer = checkServer();\n const store = getOrCreateStore(props.req);\n // call children's getInitialProps\n // get initProps and transfer in to the page\n const initialProps = Component.getInitialProps\n ? await Component.getInitialProps({ ...props, isServer, store })\n : {};\n return {\n store,\n initialProps,\n initialState: store.getState(),\n };\n };\n return ComponentWithDva;\n };\n}\n"
},
{
"path": "examples/with-react-router-3/.eslintrc",
"content": "{\n \"parser\": \"babel-eslint\",\n \"extends\": \"airbnb\",\n \"rules\": {\n \"generator-star-spacing\": [0],\n \"consistent-return\": [0],\n \"react/forbid-prop-types\": [0],\n \"react/jsx-filename-extension\": [1, { \"extensions\": [\".js\"] }],\n \"global-require\": [1],\n \"import/prefer-default-export\": [0],\n \"react/jsx-no-bind\": [0],\n \"react/prop-types\": [0],\n \"react/prefer-stateless-function\": [0],\n \"no-else-return\": [0],\n \"no-restricted-syntax\": [0],\n \"import/no-extraneous-dependencies\": [0],\n \"no-use-before-define\": [0],\n \"jsx-a11y/no-static-element-interactions\": [0],\n \"no-nested-ternary\": [0],\n \"arrow-body-style\": [0],\n \"import/extensions\": [0],\n \"no-bitwise\": [0],\n \"no-cond-assign\": [0],\n \"import/no-unresolved\": [0],\n \"require-yield\": [1]\n },\n \"parserOptions\": {\n \"ecmaFeatures\": {\n \"experimentalObjectRestSpread\": true\n }\n }\n}\n"
},
{
"path": "examples/with-react-router-3/.roadhogrc",
"content": "{\n \"entry\": \"src/index.js\",\n \"env\": {\n \"development\": {\n \"extraBabelPlugins\": [\n \"dva-hmr\",\n \"transform-runtime\",\n [\"module-resolver\", {\n \"alias\": {\n \"dva\": \"dva-react-router-3\"\n }\n }]\n ]\n },\n \"production\": {\n \"extraBabelPlugins\": [\n \"transform-runtime\",\n [\"module-resolver\", {\n \"alias\": {\n \"dva\": \"dva-react-router-3\"\n }\n }]\n ]\n }\n }\n}\n"
},
{
"path": "examples/with-react-router-3/.roadhogrc.mock.js",
"content": "export default {};\n"
},
{
"path": "examples/with-react-router-3/package.json",
"content": "{\n \"name\": \"dva-example-react-router-3\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"roadhog server\",\n \"build\": \"roadhog build\",\n \"lint\": \"eslint --ext .js src test\"\n },\n \"engines\": {\n \"install-node\": \"6.9.2\"\n },\n \"dependencies\": {\n \"babel-runtime\": \"^6.9.2\",\n \"dva-react-router-3\": \"^0.3.0\",\n \"react\": \"^16.0.0\",\n \"react-dom\": \"^16.0.0\"\n },\n \"devDependencies\": {\n \"babel-eslint\": \"^7.1.1\",\n \"babel-plugin-dva-hmr\": \"^0.3.2\",\n \"babel-plugin-module-resolver\": \"^2.7.1\",\n \"babel-plugin-transform-runtime\": \"^6.9.0\",\n \"eslint\": \"^3.12.2\",\n \"eslint-config-airbnb\": \"^13.0.0\",\n \"eslint-plugin-import\": \"^2.2.0\",\n \"eslint-plugin-jsx-a11y\": \"^2.2.3\",\n \"eslint-plugin-react\": \"^6.8.0\",\n \"expect\": \"^1.20.2\",\n \"redbox-react\": \"^1.3.2\",\n \"roadhog\": \"^1.2.0\"\n }\n}\n"
},
{
"path": "examples/with-react-router-3/src/components/Example.js",
"content": "import React from 'react';\n\nconst Example = () => {\n return \n \n \n Back\n \n \n
Example
;\n};\n\nExample.propTypes = {};\n\nexport default Example;\n"
},
{
"path": "examples/with-react-router-3/src/index.css",
"content": "\nhtml, body, :global(#root) {\n height: 100%;\n}\n\n"
},
{
"path": "examples/with-react-router-3/src/index.ejs",
"content": "\n\n\n \n \n \n
\n );\n}\n\nIndexPage.propTypes = {};\n\nexport default connect()(IndexPage);\n"
},
{
"path": "examples/with-react-router-3/src/services/example.js",
"content": "import request from '../utils/request';\n\nexport async function query() {\n return request('/api/users');\n}\n"
},
{
"path": "examples/with-react-router-3/src/utils/request.js",
"content": "import fetch from 'dva/fetch';\n\nfunction parseJSON(response) {\n return response.json();\n}\n\nfunction checkStatus(response) {\n if (response.status >= 200 && response.status < 300) {\n return response;\n }\n\n const error = new Error(response.statusText);\n error.response = response;\n throw error;\n}\n\n/**\n * Requests a URL, returning a promise.\n *\n * @param {string} url The URL we want to request\n * @param {object} [options] The options we want to pass to \"fetch\"\n * @return {object} An object containing either \"data\" or \"err\"\n */\nexport default function request(url, options) {\n return fetch(url, options)\n .then(checkStatus)\n .then(parseJSON)\n .then(data => ({ data }))\n .catch(err => ({ err }));\n}\n"
},
{
"path": "examples/with-redux-undo/.babelrc",
"content": "{\n \"presets\": [\"env\", \"react\"],\n \"plugins\": [\"transform-object-rest-spread\"]\n}\n"
},
{
"path": "examples/with-redux-undo/.gitignore",
"content": "# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n\n# testing\n/coverage\n\n# production\n/build\n/dist\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# development\n.cache\n*.map"
},
{
"path": "examples/with-redux-undo/.npmrc",
"content": "package-lock=false"
},
{
"path": "examples/with-redux-undo/README.md",
"content": "# Redux Undo Sample\n\n```\nnpm install\nnpm start\n```\n\nor\n\n```\nyarn\nyarn start\n```\n\nOpen http://localhost:1234 to view Counter App\n---\n\nSupport\nhttps://github.com/omnidan/redux-undo\n"
},
{
"path": "examples/with-redux-undo/package.json",
"content": "{\n \"name\": \"dva-example-redux-redu\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"parcel ./src/index.html \"\n },\n \"author\": \"sjy Yay! Welcome to dva!
\n \n- \n
- \n To get started, edit
src/index.jsand save to reload.\n \n - \n \n Getting Started\n \n \n
\n {\n props.dispatch({ type: 'counter/minus' });\n }}\n >\n -\n \n {\n props.dispatch({ type: 'counter/add' });\n }}\n >\n +\n \n {\n props.dispatch(ActionCreators.undo());\n }}\n >\n Undo\n \n {\n props.dispatch(ActionCreators.redo());\n }}\n >\n Redo\n \n
\n );\n});\n\n// 4. Router\napp.router(() => Count: {props.counter}
\n{props.count}
;\n });\n\n function Home() {\n return ;\n }\n\n function Users() {\n return ;\n }\n\n app.router(({ history }) => {\n return (\n {count}
\n {count}
\n {shallowEqualCount}
\n {store.getState().count}
\n