dvajs Model几个疑问?️

Question

1、一个页面配置几个Model是根据什么？
2、dva文档说effects里不直接修改state，请问是在dispatch里传键名，effects接收后填到state吗？
3、我以为的dva的概念大概是，UI事件、网络回调，都会触发action，最后驱动组件更新，但现在是model通过props传入组件
4、dvajs到底提供了什么？

看我下面的代码，这样有违effects里不直接修改state吗？

Answer 1

dva设计动机用过redux都知道，redux设计思想极好，但学习概念很多，晦涩难懂，不利于初学者，并且开发过程中，牵一发而动全身，往往改一个小地方，需要在 reducer, saga, action 之间来回切换 ，因此支付宝前端团队才写的dva。dva概念dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念！说白了，dva就是为了解决redux现有问题（比如概念多，编写繁琐。。。）而设计的库。您可以把它理解成jquery对js的封装！model方法dva核心就是 model 方法，用于把 reducer, initialState, action, saga 封装到一起，其中Model是相关业务操作集合体，是面向业务的一个拆分，因此Model叫做domain model（业务模型）更合理些。一般情况model都按照功能模块划分，就比如公司项目A，这个项目包含用户模块、产品模块、活动模块， 那您就可以拆分成三个Model，分别为user.js、product.js、activitie.js，如果其中一个模块过于庞大您可以再细分，具体依据自己的业务！dva开发流程当用户交互改变数据时会通过 dispatch 发起一个 action，同步行为会直接通过 reducers 改变 state ，异步行为则先触发 effects 然后再通过 reducers 改变 state，其中 dispatch 是在组件 connect models以后，通过 props 传入的。该设计思路基本跟开源社区保持一致，现在我们举例说明下dva开发流程，同步行为，异步行为都有：/*** 这是user组件（Component）*/// ES7新标准:装饰器（Decorator）@connect(state => ({&nbsp; &nbsp; user: state.user,}))// 如果您不喜欢ES7装饰器，那好办，我就帮您写一个不用的export default connect(state => ({&nbsp; &nbsp; user: state.user,}))(User);// 如果不喜欢ES7装饰器，就不要加export defaultexport default class User extends Component {&nbsp; &nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; &nbsp; const { dispatch } = this.props;&nbsp; &nbsp; &nbsp; &nbsp; // 获取数据，异步行为&nbsp; &nbsp; &nbsp; &nbsp; dispatch({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'user/fetch',&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; componentWillUnmount() {&nbsp; &nbsp; &nbsp; &nbsp; const { dispatch } = this.props;&nbsp; &nbsp; &nbsp; &nbsp; // 清空数据，同步行为&nbsp; &nbsp; &nbsp; &nbsp; dispatch({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'user/clear',&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; const { user } = this.props;&nbsp; &nbsp; &nbsp; &nbsp; // 获取到数据了，我要展示到页面上&nbsp; &nbsp; &nbsp; &nbsp; const { userData, } = user;&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 用户数据：{userData}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}/*** 这是user model（Model）*/export default {&nbsp; &nbsp; namespace: 'user',&nbsp; &nbsp; state: {&nbsp; &nbsp; &nbsp; &nbsp; userData: [],&nbsp; &nbsp; },&nbsp; &nbsp; effects: {&nbsp; &nbsp; &nbsp; &nbsp; *fetch(_, { call, put }) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // fetchUserData为获取user数据的函数&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const response = yield call(fetchUserData);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yield put({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'save',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; payload: response,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; },&nbsp; reducers: {&nbsp; &nbsp; &nbsp; save(state, { payload }) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...state,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...payload,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; clear() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; userData: [],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; },&nbsp; },};