没有新概念，都是旧的。

Why dva ?

经过一段时间的自学或培训，大家应该都能理解 redux 的概念，并认可这种数据流的控制可以让应用更可控，以及让逻辑更清晰。

但随之而来通常会有这样的疑问：概念太多，并且 reducer, saga, action 都是分离的（分文件）。

这带来的问题是：

• 编辑成本高，需要在 reducer, saga, action 之间来回切换
• 不便于组织业务模型 (或者叫 domain model) 。比如我们写了一个 userlist 之后，要写一个 productlist，需要复制很多文件。

还有一些其他的：

• saga 书写太复杂，每监听一个 action 都需要走 fork -> watcher -> worker 的流程
• entry 书写麻烦
• ...

而 dva 正是用于解决这些问题。

What's dva ?

dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念，全部代码不到 100 行。( Inspired by elm and choo. )

dva 是 framework，不是 library，类似 emberjs，会很明确地告诉你每个部件应该怎么写，这对于团队而言，会更可控。另外，除了 react 和 react-dom 是 peerDependencies 以外，dva 封装了所有其他依赖。

dva 实现上尽量不创建新语法，而是用依赖库本身的语法，比如 router 的定义还是用 react-router 的 JSX 语法的方式(dynamic config 是性能的考虑层面，之后会支持)。

他最核心的是提供了 app.model 方法，用于把 reducer, initialState, action, saga 封装到一起，比如：

app.model({
  namespace: 'products',
  state: {
    list: [],
    loading: false,
  },
  subscriptions: [
    function(dispatch) {
      dispatch({type: 'products/query'});
    },
  ],
  effects: {
    ['products/query']: function*() {
      yield call(delay(800));
      yield put({
        type: 'products/query/success',
        payload: ['ant-tool', 'roof'],
      });
    },
  },
  reducers: {
    ['products/query'](state) {
      return { ...state, loading: true, };
    },
    ['products/query/success'](state, { payload }) {
      return { ...state, loading: false, list: payload };
    },
  },
});

在有 dva 之前，我们通常会创建 sagas/products.js, reducers/products.js 和 actions/products.js，然后在这些文件之间来回切换。

介绍下这些 model 的 key ：(假设你已经熟悉了 redux, redux-saga 这一套应用架构)

• namespace - 对应 reducer 在 combine 到 rootReducer 时的 key 值
• state - 对应 reducer 的 initialState
• subscription - [email protected] 的新概念，在 dom ready 后执行，这里不展开解释，详见：A Farewell to FRP
• effects - 对应 saga，并简化了使用
• reducers

How to use

参考 examples：

• count
• popular-products

Roadmap

• [x] devtool 热替换支持
• [x] Router 支持 Dynamic Config
• [x] Effects 需要支持更多的 saga 模式
• [ ] ~~Effects 考虑通过扩展的方式接入 thunk, promise, observable 等方案，基本目的是可以兼容 IE8~~
• [ ] ~~Component 之间还要传递 dispatch 太麻烦了，考虑下方案~~
• [x] 单元测试方案
• [x] More Examples: todolist, users in antd-init, popular products

FAQ

开发工具层面的支持?

除了热替换还待适配，其他的比如 redux-devtool, css livereload 等都是兼容的。

是否已经可用于生成环境?

可以。

是否包含之前 redux + redux-saga 那套应用架构的所有功能?

是的。

浏览器兼容性?

IE8 不支持，因为使用了 redux-saga 。(后面会考虑以扩展的方式在 effects 层支持 thunk, promise, observable 等)

dva是对react全家桶的最佳实践整合，已经能够非常有效地提升开发效率了。在实践中，发现dva理论上可以有更好地开发模式。因此，这里我提出一个建议，对dva进行改进，也希望参与到dva的开发之中。

dva的model

dva常规的model编写结构如下所示：

{
  namespace: '', 
  subscriptions:{},  
  state: {},  
  effects: {},  
  reducers: {},  
}

熟悉dva的人大概都知道上面的结构所对应的操作是什么，不展开。这里想谈一谈effects和reducers这两个对象。effects对应的是相关的异步action，reducers对应的是相关的同步action。当我们写一个简单的页面时，effects和reducers中的方法都不会太多。但是当我们写一个复杂页面时，异步的请求与同步的状态更新都会有很多，这样就会导致model中的异步与同步action对象中的方法列表过长，后期维护与代码迭代时，当我们要找到对应的方法时，就不那么地直观和方便。

示例

{
  namespace: '', 
  subscriptions:{},  
  state: {},  
  effects: {
     getUserList(){},
     create(){},
     update(){},
     remove(){},
     removeAll(){}
  },
  reducers: {
     setLoading(){},
     saveModal(){},
     switchView(){},
     createSuccess(){},
     updateSuccess(){},
     removeSuccess(){},
     removeAllSuccess(){}
  }
}

以一个管理用户的页面为例，这里内部实现没有写，非常简单的管理，effects和reducers中已经有五六个函数了。如果这个页面的管理功能更多一些，例如这个列表会继续地增长。当模型变得复杂时，我们阅读代码和寻找一个方法时就需要经常在effects和reducers这两个非常长的函数对象中跳来跳去，写代码异常不便。

我们可以分析一下一个dva单页面的运行情况：

1. 请求数据未到达浏览器端时，设置loading状态为true,数据到达后设置loading为false。这可以视为一个页面的前置阶段。
2. 页面中任何的事件操作都需要触发effects中的方法进行异步请求，当请求完成时，调用reducers中的同步方法进行状态更新。从交互上来说，请求失败与请求成功都应该让用户有相对应的感知。

更内聚的设计

程序设计上我们通常讲究『高内聚，低耦合』的设计原则。从dva的model来说，其实是可以实现功能内聚的。也就是说，可以按模块组织相关的功能方法，因此，模块的相关操作从编辑体感上不会四分五裂。

仔细观察，其实effects和reducers分别对应了异步调用与同步调用，写法都是存在自己各自的特征的。effects中都是generator函数或者是async函数，而reducer中是普通的函数。那么，在JS中，我们其实有办法识别这两者的特征的。这是实现功能内聚的前置条件。

我希望的model写法如下：

{
  namespace: 'user',
  state: { },
  userList: {
    before() { },  // 同步，函数显示loading
    after(){}, // 同步，隐藏loading
    *retrieve() {}, // 异步, 请求读取列表
    *create() {}, // 异步，创建用户
    *update(){}, // 异步，更新用户信息
    saveModal(){}, // 同步，显示或者隐藏modal
    successMessage(){}, // 模块内可复用的消息提示
    failMessage() { }, 
  },
}

由于model的默置对象是固定的。因此，只要尊重namespace、state、subscriptions、effects和reducers这些保留关键字，就可以对model进行扩展了。

意思是，不破坏同时兼容原有的model结构。model可以实现一层语法糖的转换功能来实现上面的写法。实质上userList这个模块的方法最终都会转换成经典的model结构，只是从coder的角度来看，更为直观一些，而上线后的结构其实与经典结构无异。

这是一个初步的想法，也请大家斧正和补充。

项目空点了，结合之前接收到的信息和自己的想法，列了 [email protected] 的考虑如下。欢迎讨论。

• 尽量兼容 dva 1.0，规则简单的 BreakChange，提供 CodeMod 一键升级
• 独立的数据流方案，不强绑 React 或其他 view 库，不强绑 Router 库，但容易和现有绑定结合，#530
• 内置合理的性能优化方案，比如 Reselect 的 memoization，不需要用户写额外的代码
• 让 reducer 和 selector 更紧密地结合，并且让他们更容易写到一起。绑到一起，更容易写，更好组合
• 更友好地进行错误提示，#436 #416
• 更直观地处理 Code splitting
• 更优雅地在 View 处理 Effect 的回调，#175
• 更优雅的 HMR 方案，#469
• 考虑 Model 的扩展和重用，比如：dva-model-extend
• Code Style：重写 Plugin 实现，拆分模块等

从开始学习dva到引入到实际项目中也有几个月的时间，下面分享一下实际的经验，另外也有一些比较含糊或者疑惑的地方，看看大家有没有有些好的思路。 dva整体构架比较清晰，但是实际使用的时候，还是需要做很多处理。

dva model扩展

在我们的基础库中，实现了Model.extend方法，所有的model都通过这个方法来创建, extend具体对以下几个方面进行了扩展.

state

根据我们的业务特点(主要为管理系统)，每个model我们都默认添加了loading, confirmLoading, spinner属性

subscriptions

subscriptions中对路由的监听 写法太过繁琐，特别是在包含参数的情况下。我们扩展了实现了listen方法

subscriptions: {
    setup({ dispatch, listen }) {
      
      //action为 redux action
      listen('/user/list', { type: 'fetchUsers'});

      //action为 回调函数
      listen('/user/:id/detail', ({ query, params }) => {
        const id = params[0];
        dispatch({
          type: 'fetchDetail',
          payload: { id }
        })
      });

      //支持对多个path的监听
      listen({
        '/user/list': ({ query, params }) => {},
        '/user/query': ({ query, params }) => {},
      });
  }

effects扩展

dva中处理loading状态非常繁琐，而dva提供的全局loading对我们业务并不适用，因为往往一个model中，有些call请求需要loading，有些call请求又不需要loading，所以我们对effects中的saga函数进行了扩展

• callWithLoading 调用请求时，自动处理loading状态
• callWithConfirmLoading 调用请求时，自动处理confirmLoading状态
• callWithSpinning 调用请求时，自动处理spinning状态

如果发送ajax请求，需要处理相关的状态，就可以使用上面的方法，如果不需要就使用原始的call方法, 使用开发中可以灵活选择. 另外，在我们的业务中，call请求成功或者失败后，往往需要弹出对应的业务提示框(消息内容有时候不是由后端提供)，故我们在上面的函数中，都提供额外的参数，支持请求结果的消息框处理。

//请求开始前会将loading = true,  请求结束后，将loading=false
const users = yeild callWithLoading(service.user.getList,user);
const users = yeild callWithLoading(service.user.getList,user,{successMsg:'加载用户成功',errorMsg:'加载用户失败'});

effects中经常需要需要更新state,但是往往又不想为每次修改都命名一个reducer函数，所以扩展了update方法，调用updateState reducer来更新state

//更新当前model的state
yield update({ users })

reducers扩展

为了配合effects中的扩展，我们默认实现了如下方法 showLoading,hideLoading... 等加载状态控制方法 updateState 直接更新state数据 resetState 重置state数据

request 扩展

fetch在实际项目中用使用，实在太过鸡肋，我们在fetch的基础上封装了Http类，实现了简单的中间件机制，方便各个项目使用，并且实现了一些常见的中间件（token中间件，统一错误弹框中间件等）

export default Http.create([dataTransformMiddleware, domainMiddleware, contentMiddleware, headerMiddleware]);

antd form扩展

antd form写法 个人觉得实在太过繁琐，一个带表单验证的输入框，往往需要FormItem & getFieldDecortor & Input 三层结构，而且混合着jsx以及js的语法. 为了简化form相关的代码，我们重新定义了field属性结构，并且提供了HForm 以及HFormItem组件。

HForm 主要应用与一些简单的form表单，不需要太多的交互 HFormItem 则是form中每一项输入框，用于复杂布局/交互的form中

const fields = [
  {
    key: 'name',
    name: '名称',
    required: true,
  }, {
    key: 'gender',
    name: '性别',
    enums: {
      MALE: '男',
      FAMALE: '女'
    }
  }, {
    key: 'birthday',
    name: '生日',
    type: 'date'
  }
];

function HFormBase({ form }) {
  const formProps = {
    fields
    item: {},
    form
  };
  const onSubmit = () => {
    validate(form, fields)((values) => {
      results = values;
    });
  };

  return (
    <div>
      <HForm {...formProps} />
      <Button onClick={onSubmit} type="primary" >提交</Button>
    </div>
  );
}

const fields = [
  {
    key: 'name',
    name: '名称',
    required: true
  }, {
    key: 'age',
    name: '年龄'
  }, {
    key: 'birthday',
    name: '生日',
    type: 'date'
  }, {
    key: 'desc',
    name: '自我介绍',
    type: 'textarea'
  }
];


function HFormItemBase({ form }) {
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
  };
  const itemProps = { form, item: {}, ...layout };
  const rules = {
    number: [{ pattern: /^\d+$/, message: '请输入数字' }]
  };
  const submit = () => {
    validate(form, fields)((values) => {
      console.log(values);
    });
  };
  const fieldMap = getFields(fields).toMapValues();

  return (
    <Form >
      <Row>
        <Col span="12" ><HFormItem {...itemProps} field={fieldMap.name} inputProps={{ disabled: true }} placeholder="指定placeholder" /></Col>
      </Row>
      <Row>
        <Col span="12" ><HFormItem {...itemProps} field={fieldMap.age} rules={rules.number} onChange={onChange} /></Col>
        <Col span="12" ><HFormItem {...itemProps} field={fieldMap.birthday} /></Col>
      </Row>
      <Row>
        <Col span="12" ><HFormItem {...itemProps} field={fieldMap.desc} /></Col>
      </Row>
      <Row>
        <Col span="12"><Button type="primary" onClick={submit} >提交</Button></Col>
      </Row>
    </Form>
  );
}

脚手架

参考dva-cli,我们实现了一个自己的脚手架，支持更丰富类型的模版(curd页面等常见页面模版)

import { connect } from 'dva';
import React, { useEffect } from 'react';

const Page = props => {
  const { dispatch, text } = props;
  useEffect(() => {
    dispatch({ type: 'xxx/fetchText' });
  }, []);

 return <div>{text}</div>
}

export default connect(({ xxx }) => ({ text: xxx.text }))(Page);

如果这样写 在检查时会被react-hooks/exhaustive-deps这条规则提示React Hook useEffect has a missing dependency: dispatch. 但是如果把dispatch加入useEffect的DependencyList里时 又会不停的执行里面的请求 请问在与dva结合使用React Hooks时应该怎么写呢

想到和收集到的需求整理如下：

• Framework
  • [x] 完成整体设计 (包含 api，addon/plugin/hook, 赋能和约束的权衡, config, 性能, model 和 routes 的动态加载 等等)
  • [x] HMR 支持: components and routes
  • [x] npm publish 前做 umd 构建
  • [x] Test Case
  • [x] 1-2 个 addon，比如 loading 状态的自动添加
• Docs
  • [x] Quick Start
  • [x] Tutorial (一个完整的教程，通过一步步引导熟悉 dva 的所有概念)
  • [x] Concepts
  • [x] API
  • [x] dva 课程开发 (面向内部全栈同学)
• Tools
  • [x] dva-cli (init, generate, 考虑封装 ant-tool 及其配置)
  • [x] dva-ast

如有遗漏，请在下面评论添加。1.0 尽量把所有 api 都敲定，难免会有一些 break change 。

Code to reproduce the issue: (请提供可复现的代码或者步骤)

var _createHashHistory = _interopRequireDefault(require("history/createHashHistory"));

Warning: Please use require("history").createHashHistory instead of require("history/createHashHistory"). Support for the latter will be removed in the next major release.

Expected behavior: (预期的正常效果)

Actual behavior: (实际效果)

Versions of packages used: (哪个库的哪个版本出现的问题)

2.4.1

检查是否登录：

• 在切换页面的时候（只能在每个子的路由里做onEnter={isLogin}吗？），如下：

<Router history={history}>
      <Route path="/" component={MainLayout} onEnter={isLogin}>
        <IndexRoute component={User} />
        <Route path='tag' component={Tag} />
      </Route>
    <Route path="/login" component={Login} />
    <Route path="*" component={NotFound} />
</Router>
不能直接在父路由上加onEnter，所有的子路由都生效么？
或者有别的什么办法

• 在请求api的时候 (可以在request.js 里面做响应前和响应后的处理，然后throw error,在全局的onerror里处理)

然后在代码里如何控制跳转呢？

Hello guys, Last two days I searched for a way how to call effectB, effectC from ModelB, ModelC inside effectA in modelA and wait for them. I read issues (#134, #325, and many more) but without any luck to find solution.

After user login I want to init few models before show dashboard.

appModel

* modelsInit({}, { put }) {
   yield put({ type: 'loadingShow' });
   yield put({ type: 'activity/query' });
   yield put({ type: 'xyz.../query' });
   yield put({ type: 'loadingHide' });
},

activityModel

  namespace: 'activity',
  .
  .
  .
  effects: {
    * query({ payload }, { call, put }) {
      const response = yield call(activityService.query, parse(payload));
      ...
  },
  .
  .
  .

Because "put" is asynchronous, 'loadingHide' is unfortunately called before 'activity/query' is finished.

Is there any elegant solution to this problem?

Thank you for your help in advance @sorrycc, @helloyou2012, @cycgit, @nikogu, @LeuisKen, @nihgwu, @zuiidea, @longzhaobi or anyone else ;o).

大家看下脚手架的目录应该如何组织? 以下是初始方案。

.
├── /mock/
├── /src/
│ ├── /components/       # React components
│ ├── /models/           # model 信息
│ ├── /routes/           # 路由 Component
│ ├── /services/         # 处理和服务器的交互
│ ├── index.html
│ ├── index.js           # 应用入口
│ ├── index.less
│ └── router.js          # 路由配置
├── package.json
├── proxy.config.js
└── webpack.config.js

详见：https://github.com/dvajs/dva-cli/tree/master/boilerplates/app

@ChrisFan @yiminghe @nikogu @afc163

在effects中使用循环多次请求接口，我不希望他阻塞。在请求完成后自动去then中改变State。但是现在的问题是可以打印出data，却不能进入到changeStatereducer里面

for (var i = 0; i < dataArr.length; i++) {
  请求数据( ).then(data => {
    console.log(data)
    put({
      type: 'changeState',
      payload: { 
        type: type,
        data: data
      }
    })
  })
}

非常感谢，能帮我解决下 @sorrycc

Bumps qs from 6.5.2 to 6.5.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps loader-utils from 1.4.0 to 1.4.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

What happens?

所有介绍dva subscription使用方法的文档，包括官网，都是类似下面这种例子：

app.model({
  subscriptions: {
    setup({ dispatch, history }) {
      console.log('xxxx1');
      history.listen(({ pathname }) => {
        console.log('xxxx2');
        if (pathname === '/users') {
          console.log('xxxx3');
          dispatch({
            type: 'users/fetch',
          });
        }
      });
    },
  },
});

但是在umi 4.x版本下，却怎么也不生效，加上上面的console.log发现，只能打出来xxxx1，但是xxxx2和3始终没有触发。

相关环境信息

• Umi 版本：4.0.24
• Node 版本：
• 操作系统：

fix: https://github.com/advisories/GHSA-33f9-j839-rf8h

• close Issues https://github.com/dvajs/dva/issues/2491

Checklist

• [ ] npm test passes
• [ ] tests are included
• [ ] documentation is changed or added
• [ ] commit message follows commit guidelines

Description of change

• any feature?
• close https://github.com/dvajs/dva/ISSUE_URL