DVA学习

一，什么是Dva?

1.由于react专注于ui渲染，功能较为单一。在实际开发过程中往往需要许多库的支持，例如用于控制数据状态的redux和redux-saga，和用于路由控制的react-router。

2.dva 是 React 应用框架，将React-Router + Redux + Redux-saga三个 React 工具库包装在一起，简化了 API，让开发 React 应用更加方便和快捷。

3.Dva = react-router + rudex + redux-saga

二，Dva项目创建

1.我们可以使用dva框架的脚手架(dva-cli)来创建dva项目

2.我们可以使用npm来安装dva-cli脚手架: npm install dva-cli -g ;

3.安装之后可以使用 dva new 命令来创建一个dva项目：dva new quickdva

4.使用 npm start 让项目跑起来

三，Dva项目结构

四，Dva的API和项目的入口文件

1.dva项目有一个入口文件，用于配置整个项目的路由，注册model，插件使用，和项目的启动，这个入口文件几乎涉及了dva的所有api

import dva from 'dva';
import './index.less';
import createLoading from 'dva-loading';

// 1. Initialize
export const app = dva(createLoading());

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example'));

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

2.dva文件默认抛出了dva函数，用于创建dva实例。
（1）该函数接受一个配置对象 dva(opt)

3.dva.use(): dva实例的use方法用于使用插件，和注册hooks

扫描二维码关注公众号，回复： 12909698 查看本文章

4.dva.modal():dva实例的model方法接受一个model对象，用于注册model

5.dva.router()：dva实例的router方法接受一个具有固定格式的函数,用于注册路由表

（{history,app}）=>{ 
	return <Router history={history}>
      <Route path="/" component={App} />
    </Router>}

五，dva输出文件

1.默认输出dva文件，dva文件默认抛出了dva函数用于创建dva实例，其中dva文件还抛出了connect高阶组件，用于将model的state包装到组件上。

2.dva/dynamic,用于动态的加载组件和model,使用app.model注册的model是全局的。

3.dva/fetch，抛出fetch，用于异步请求。

4.dva/router,用于注册路由

五，数据流向

1.数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的。当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State。

2.我们在models文件夹里定义model，model对象里拥有许多选项

(1) namespace : 接收一个字符串表示model 的命名空间，同时也是他在全局 state 上的属性。

(2) state : 接收一个对象表示页面状态初始值，优先级低于传给 dva() 的 opts.initialState。

(3) reducers : 接收一个对象定义同步操作，唯一可以修改 state 的地方，

形式为 (state, action) => newState

其中第一参数表示上一次的state ,
action 如下，其中 action.payload可以获得传进来的参数。
最后返回一个新的state。

(4) effects : 接收一个对象定义异步操作

格式为 *(action, effects) => void 或 [*(action, effects) => void, { type }] 。其中*代表是es6的generator函数。

其中effects是一个对象有{put, call, select}:
put 类似于dispatch触发一个action,
call用于进行异常操作，例如发送请求，
select从model里选择数据，要在effects函数中使用state里的数据，必须使用select。

(5) subscriptions : 订阅数据源
相当于一个监听器，可以监听路由变化，鼠标，键盘变化，服务器连接变化，状态变化等，这样在其中就可以根据不同的变化做出相应的处理，在这个subsription中的方法名是随意定的，每次变化都会一次去调用里面的所有方法，所以一边会加相应的判断

subscriptions：{
    
    
	setup({
    
    dispatch,history})
	{
    
    
		history.listen(({
    
     pathname }) => {
    
    
                // if (pathname === '/factoryInfo') {
    
    
                //     dispatch({ type: 'getList' })
                //     dispatch({ type: 'commonM/getOrgTree' })
                //     dispatch({ type: 'commonM/getDivisionTree' })
                // }
            });
	}
	}

3.在定义完model之后，我们要使用 connect 来连接view和model。使用connect时需要从'dva/connect'导入。

**当在路由定义时，import了modal时，整个页面的组件都可以通过connect来包装自己，**包装自己的含义就是将state加到组件的props里（在react中，只要组件state和props才能驱动视图变化。

connect接受一个函数作为参数，并且返回一个函数，返回的函数接受一个组件作为参数，并且返回连接了state的包装后的组件。

export default connect(({
    
     reportM, dataDetailM }) => ({
    
     reportM, dataDetailM }))(WasteCollectReport);

mapStateToProps(xxx,xxx,xxx){
    
     //建立state和props的对应关系，这里的参数是model的namespace
return {
    
    
someProps:xxx,
somePross:xxx}}

export default connect({
    
    mapStateToProps,mapActionToProps})(C)

被包装后的组件C的props里包含了mapStateToProps返回的字段。

4.dispatch(action)用于触发action，action如上描述一个行为。其中的type描述了要执行的函数。
在连接了model的组件上，我们可以使用props访问到dispatch方法。这也是我们唯一在组件里调用reducers和effects的方式。

六，组件页面

1.使用路由跳转的组件props包含了什么。

2.从上图可以看出我们可以在props里访问到model字段，也可以使用触发action的方法dispatch,以及路由跳转的相关参数。

六，loading对象，

1，dva框架内置了loading插件，我们可以在全局中import后使用。

import createLoading from 'dva-loading';
export const app = dva(createLoading());

这样在所有的组件中都可以使用loading对象。

2,具体用法，用于异步操作，在异步操作开始时为true,结束时为false。

export default connect(
  ({
    
    
    userAndlogin,
    loading,
  }) => ({
    
    
    userAndlogin,
    submitting: loading.effects['userAndlogin/login'],
  }),
)(Login);