Dva.js 入门级教学文档-2

Dva.js 入门级教学文档-2

• 简介
• 四、Model 包下文件架构(重点)
• 1、namespace
• 2、state
• 3、reducers
• (1)、save
• (2)、state
• (3)、action
• (4)、payload
• (5)、return
• 4、effects
• (1)、*
• (2)、query
• (3)、payload
• (4)、call
• (5)、put
• (6)、select
• (5)、subscription
• 五、connect 连接 Model 和 Route 页面下的数据
• 六、初始化数据 和 Model 数据比对
• 1、初始化数据
• 2、Model -> state
• 七、数据显示和操作的流程
• 1、编写 Route 页面
• 2、编写 Model 层代码
• 3、编写 初始化数据
• 4、修改路由配置
• 5、使用 connect 连接
• 6、前台调用 Model 层方法
• 7、数据在 Model 中的流向
• 八、稍复杂概念
• 1、多次调用
• 2、多任务调度
• 并行
• 竞争
• 子任务

简介

你好！

本人为 2019.7 毕业的应届毕业生，目前从事前端工程师的职业。对知识充满渴望。如果本文中有什么错误的地方，还请各位指正。谢谢。

本文的定位为给还没接触过 Dva,想在 Dva 入门的世界里够得到门把的小伙伴们。

本文有参考 Dva.js 官网。想快速入手请看本教程。想正统的学习 Dva 知识，请看官网。

本次教程共分为两个文档，这是第二部分(四、五、六、七)。

如果还未看第一部分的小伙伴们，请先看 第一部分 的知识。

先给小伙伴们看一下本文的目录架构：

• 一、介绍
• 二、环境搭建和使用
• 三、全局架构
• 四、Model 包下文件架构
• 五、connect 连接 Model 和 Route 页面下的数据
• 六、初始化数据 和 Model 数据比对
• 七、数据显示和操作的流程
• 八、稍复杂概念

四、Model 包下文件架构(重点)

1、namespace

官网解释：当前 Model 的名称。整个应用的 State,由多个 Model 的 State 以 namespace 为 key 合成的。

官网解释很绕，通俗的说：就是给每个 Model 一个命名用作 key 的标识。一般命名方式等于 Model js 的 文件名，举个例子：

Model 文件 home.js 里 namespace 值可以设为：home

2、state

该 Model 当前的状态。每个 Model 的数据都保存在这里，这里的数据通过 Route 视图层的 this.props,直接显示在页面上。

这里的数据一改变，页面上的数据也将自动改变。

3、reducers

用来处理同步操作。如果不需要调接口时候，我们前台传递的 action(不懂的小伙伴不着急，下面有微讲解) 可以直接调用 reducers 里的方法。

上面说的同步是同步什么呢？同步该 Model 里面的 state 的数据。

打开项目中 models example.js。找到 reducers,我将他复制在下方，来讲解一下怎么创建 reducers 下的方法。

reducers: {
    save1(state, action) {
        return { ...state, ...action.payload };
    },
    save2(state, action) {
        return { ...state, ...action.payload };
    },
},

(1)、save

save:为一个普通方法的命名，可自行取名

(2)、state

state:为当前 Model 下的所有 state 值，可以 console.log(state) 看一下输出就知道了。

(3)、action

action:当前台页面需要进行数据操作时，就会创建一个 action,action 存放了传递过来需要对当前 state 进行改变的数据。

(4)、payload

payload:就是 action 里传递过来的数据。可以 console.log(action.payload) 看一下输出就知道了。

(5)、return

return：返回的是新的 state。等于舍弃了旧的 state,重新 return 一个新的 state 作为当前 Model 的 state。

一般情况下，我们要解开旧的 state,将它重新赋值给新的 state。...state 为 ES6 语法。

将操作完成得数据累加到 return 中。

同名的数据会覆盖，所以不用担心旧的 state 值会影响到新设置的值。

不同名的数据会追加。

4、effects

用来处理异步操作。如果需要调取接口的话，前台页面就需要调用 effects 里的方法。

将数据取出来，在传递给 reducers 里的方法进行数据操作和同步 state。

来看看例子：

import { querySomething } from '@/services/api';

*query({ payload }, { call, put, select }) {
    const data = yield call(querySomething, payload);
    console.log(data)
    yield put({
    type: 'save1',
    payload: { name: data.text },
    });
},

(1)、*

*:这个 * 符号，可能小伙伴们不熟悉，简单点，不管它，只要记住每个 effects 里方法前面都加上 * 即可。

稍微解释一下：

这表明它是一个异步函数，里面可以使用 yield 等待其他异步函数执行结果。

(2)、query

query:方法名，自定义命名。不多解释。

(3)、payload

payload:当前台页面需要进行数据操作时，就会创建一个 action,action 存放了传递过来需要对当前 state 进行改变的数据。

payload 就是存放在 action 里面的数据。可以 console.log(payload) 看输出的效果。

(4)、call

call:与后台服务端接口进行交互。

第一个传参：后台服务器接口对应的名称。第二个参数：入参。

同行的 data 为出参。可以 console.log(data) 看输出的效果。

(5)、put

put:用来发出事件，即 action。一般调用 reducers 下的方法进行同步数据。

type:该 Model 层里 reducers 下的方法名。

payload:参数的传递。

如此一来。我们就将服务端查出来的数据，传递给 reducers 进行同步数据的操作了。

(6)、select

select:如果我们需要调用到其他 Model 层里面的 state值。那么我们就需要用 select 来进行操作。

const homeName = yield select(state => state.home);

这样我们就可以取到名为 home 的 Model 层里面的 state 数据了。

(5)、subscription

Model 中的 subscription 相当于一个监听器，可以监听路由的变化、鼠标、键盘、服务器连接变化等。

这样再其中可以根据不同的变化作出相应的处理。

如果你只是入门级别的选手，其实不需要用到这个东西，我自己也没用过，放个例子你们看看。

subscriptions: {
    setup:({ dispatch, history }) {
        window.onresize = () => {   //这里表示的当浏览器的页面的大小变化时就会触发里面的dispatch方法，这里的save就是reducers中的方法名
        dispatch (type:"save")  
      }
    },
    onClick ({dispatch}) {
      document.addEventListener('click',() => {   //这里表示当鼠标点击时就会触发里面的dispatch命令，这里的save就是reducers中的方法名
        dispatch (type:"save")
    })
}

五、connect 连接 Model 和 Route 页面下的数据

dva 有提供 connect 方法。只要在每个 Routes 页面导入下面的代码即可。

import { connect } from 'dva';

如果细心的小伙伴已经发现了，Routes 下的页面定义的都是状态组件，而不是用 class ~ extends React.Components,这样的好处是：组件不被实例化，整体渲染性得到了提升。

对于组件：

我们在最后导出时使用 connect 进行与 Models 的连接。

export default connect(({index}) => ({index}))(IndexPage);

解释一下 index:

index 为 Model 层里面的 namespace。只要补上上面的代码就可以了。是不是很快~

六、初始化数据 和 Model 数据比对

1、初始化数据

这里指的是全局 index.js 里的 initialState,大家可以参考 第三大点->第1小点下:创建 dva 实例

这里存放的是一个个以 model 下的 namespace 命名的对象；如果你随意命名的化页面是找不到你存放在这里的数据的。

2、Model -> state

这里也是用来存放数据对象的。

两者的对比是：initialState 的优先级会高于 model => state,默认是 {},所以页面初始化时，读取到的数据是 initialState。

七、数据显示和操作的流程

接下来我将用最简单的步骤从无到有的演示一遍 dva 的写法和数据传输的流向。

不要看有那么多的步骤，其实每一步都很简短，很简单。

1、编写 Route 页面

class 的写法就是 class ~ extends React.Component{}

这里我将用组件的形式演示一遍。

import React from 'react';

const Example = ({dispatch,全局 `index.js` 里你需要的参数对象名称}) => {
    return (<div></div>)
}

export default Example;

这就是一个最简单的页面。

2、编写 Model 层代码

export default {

  namespace: 'example',

  state: {},

  effects: {
    *fetch({ payload }, { call, put }) {  // eslint-disable-line
      yield put({ type: 'save',payload:data });
    },
  },

  reducers: {
    save(state, action) {
      return { ...state, ...action.payload };
    },
  },
};

也是最简单的 Model 的格式，有任何不懂得地方请直接参考第四大点。

3、编写 初始化数据

在全局 index.js 里 修改下面这段代码：

const app = dva({
    initialState: {
        example: {
            name:'nameText'
        }
    }
})

app.model(require('./models/example').default);     //还要记得补上这句话。在 index.js 里载入它。

4、修改路由配置

import Count from './routes/Example';

<Route path="/example" exact component={Example} />

5、使用 connect 连接

在 Route -> example.js 页面上使用 connect。

修改代码：

import { connect } from 'dva';

export default connect(({ example }) => ({ example }))(Example);

如此一来，在页面上通过 this.props 即可获取到 example 里得数据。

6、前台调用 Model 层方法

如果需要于后台交互，那么就需要将入参传递到后台的 Model 层进行服务器的交互。

这里距需要讲解一下 dispatch了。

dispatch：是一个用于触发 action(这里可以直接理解为：调用后台的 model 里的方法) 的函数。只是触发 Model 里的函数而已，并没有对数据进行操作。

可以类比为一个引路人。

来看一下前台怎么使用 dispatch 的。

const { dispatch } = this.props;    //在 dva 中，可以通过 `this.props` 直接取得 `dispatch`

dispatch ({
    type:'example/fetch',           //指定哪个 model 层里面的哪个 方法
    payload:{name:'exampleNew'},    //需要传递到 model 层里面的参数。dayload 为固定用法(我自己的理解)。
})

至此，我们就已经在页面上触发了 model 层里面的某个方法，并且把参数一起传递过去了。

type:如果你不需要调用异步的话可以直接 example/save 调用 reducer 下的方法。

7、数据在 Model 中的流向

下面这些文字若有任何不懂的地方请直接参考上面的内容。

如果你上一步是调用 异步(Effects) 里的方法的话

那么你可以 console.log(dayload) 下,看看数据是否有传递过来。

如果需要调用 服务端接口就使用 const data = yield call(接口名,参数名);,然后 console.log(data) 看看数据有没有查询出来。

接着调用 yield put({ type:'save',payload:data }) 调用 将参数传递到 reducer 下的方法进行同步。

来到 reducers 的方法下，进行数据操作，操作完成后用 return 将数据返回给 state。

八、稍复杂概念

1、多次调用

在一个 effect 中，可以使用多个 put 来分别调用 reducer 更新状态(state)。

在一个 effect 中，可以存在多个 call 操作。

2、多任务调度

• 并行。若干任务之间不存在依赖关系，并且后续操作对他们的结果无依赖。
• 竞争。只有一个完成，就进入下一个环节。
• 子任务。若干任务，并行执行，全部做完之后，才能进入下一个环节。

并行

const [ result1,result2 ] = yield [
    call(service1,param1),
    call(service2,param2),
]

竞争

const { result1,result2 } = yield race({
    result1:call(service1,param1),
    result2:call(service2,param2),
})

子任务

可以直接参照 上一点 多次调用 的方法。