DvaJS是甚么

dva 具体来说是两个如前所述 redux、redux-saga 的报文计划，接着为的是精简合作开发新体验，dva 还附加内建了 react-router 和 fetch，因此也能认知为两个轻量的应用领域架构。

优点

产品目录内部结构

产品目录内部结构

mock配置文件下放置Mock数据，src/assets产品目录下放置动态天然资源，src/componments放置公用模块，models产品目录下放置状况（state）、操作方式（action）、过敏反应（effects），routes存在路由view，services产品目录下放置网络请求，utils产品目录下放置工具类。

核心基本概念

1.报文向

数据的改变通常是透过采用者交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候能透过 dispatch 发起两个 action，如果是同步行为会直接透过 Reducers 改变 State ，如果是异步行为（过敏反应）会先触发 Effects 接着流向 Reducers 最终改变 State，因此在 dva 中，报文向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）。

2.Models

Models是react-redux和react-soga的集成，里面涉及基本概念：state、dispatch函数、action、effect、reducer、subscription。

export default { namespace: example, state: {}, subscriptions: { setup({ dispatch, history }) { // eslint-disable-line }, }, effects: { *fetch({ payload }, { call, put }) { // eslint-disable-line yield put({ type: save }); }, }, reducers: { save(state, action) { return { …state, …action.payload }; }, },};

State 表示 Model 的状况数据，通常表现为两个 javascript 对象（当然它能是任何值）；操作方式的时候每次都要当作不可变数据（immutable data）来对待，保证每次都是全新对象，没有引用关系，这样才能保证 State 的独立性，便于测试和追踪变化。

Action 是两个普通 javascript 对象，它是改变 State 的唯一途径。无论是type属性指明具体的行为，其它字段能自定义，如果要发起两个 action 需要采用dispatch 函数；需要注意的是 dispatch 是在模块 connect Models以后，透过 props 传入的。

dispatch 函数是两个用于触发 action 的函数，action 是改变 State 的唯一途径，但是它只描述了两个行为，而 dipatch 能看作是触发这个行为的方式，而 Reducer 则是描述如何改变数据的。

Reducer（也称为 reducing function）函数接受两个参数：之前已经累积运算的结果和当前要被累积的值，返回的是两个新的累积结果。该函数把两个集合归并成两个单值。

Effect 被称为过敏反应，在我们的应用领域中，最常见的就是异步操作方式。它来自于函数编程的基本概念，之因此叫过敏反应是因为它使得我们的函数变得不纯，同样的输入不一定获得同样的输出。

Subscription 语义是订阅，用于订阅两个数据源，接着根据条件 dispatch 需要的 action。数据源能是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

3.Route

这里的路由通常指的是前端路由，由于我们的应用领域现在通常是单页应用领域，因此需要前端代码来控制路由逻辑，透过浏览器提供的 History API能监听浏览器url的变化，从而控制路由相关操作方式。

import React from react;import { Router, Route, Switch } from dva/router;import IndexPage from ./routes/IndexPage;function RouterConfig({ history }) { return ( <Router history={history}> <Switch> <Route path=”/” exact component={IndexPage} /> </Switch> </Router> );}export default RouterConfig;