Dva

发表于 分类于
dva首先是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva还额外内置了react-router和fetch...

dva

官网：https://dvajs.com

dva首先是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva还额外内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架

img

特性：

  • 易学易用：仅有6个api，对redux用户尤其友好，配合umi使用后，更是降低为 0 API
  • elm概念：通过reducers，effets和subscriptions组织model
  • 插件机制：比如dva-loading可以自动处理loading状态，不用一遍遍地写showLoading和hide Loading
  • 支持HMR：基于babel-plugin-dva-hmr 实现components、routes和models的HMR

安装：npm i dva-cli -g 通过npm安装dva-cli并确保版本是0.9.1或以上

创建项目：dva new myproject

dva项目目录结构

  • mock 用来进行api测试的模块
  • node_modules 依赖模块
  • public
    • index.html 项目入口html
  • src 核心文件
    • assets 静态资源目录
    • components 公共组件目录
    • models 模型文件：结合redux-saga状态管理
    • routes 路由组件
    • services 进行所有的异步请求
    • utils 工具类目录，封装request请求（fetch(原生)、axios）
    • index.js 项目核心入口js文件
    • index.css 全局样式文件
    • router.js 全局路由配置文件
  • .editorconfig 编辑器配置
  • .eslintrc eslint代码检查
  • .gitignore git忽略文件
  • .roadhogrc.mock.js 用来做api测试的，需要注册使用
  • .webpackrc webpack相关配置，反向代理
  • package.json 版本依赖信息

dva中的路由

由上面已知的目录结构，项目的路由配置，架构均在src/router.js中，其基本配置与正常的react-router V5 无大差异（当前dva版本为0.10.1，react-router为V5版本）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import React from 'react';
import {Router, Route, Switch,Redirect} from 'dva/router';
import App from './routes/App'
import Film from './routes/Film'
import Cinema from './routes/Cinema'
import Center from './routes/Center'
import Detail from "./routes/Detail";
import Login from "./routes/Login";
function RouterConfig({history}) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/" render={() =>
          <App>
            <Switch>
              <Route path="/film" component={Film}/>
              <Route path="/cinema" component={Cinema}/>
              {/*路由拦截*/}
              <Route path="/center" render={() =>
                localStorage.getItem("token") ? <Center/> : <Redirect to="/login" />

              }/>
			{/*路由传参*/}
              <Route path="/detail/:myid" component={Detail}/>
              {/*重定向*/}
              <Redirect to="/film" from="/" />
            </Switch>
          </App>
        }/>

      </Switch>
    </Router>
  );
}

export default RouterConfig;

当普通组件先要使用，路由相关API的时候，依然需要withRouter高阶组件来进行包装，此时的withRouter是由 dva/router 导入的

dva中的状态管理

dva中的状态管理主要被封装到了models中，那么先来介绍下models中的相关API

State

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

在 dva 中你可以通过 dva 的实例属性 _store 看到顶部的 state 数据，但是通常你很少会用到:

1
2
const app = dva();
console.log(app._store); // 顶部的 state 数据

Action

1
type AsyncAction = any

Action 是一个普通 javascript 对象，它是改变 State 的唯一途径。无论是从 UI 事件、网络回调，还是 WebSocket 等数据源所获得的数据，最终都会通过 dispatch 函数调用一个 action，从而改变对应的数据。action 必须带有 type 属性指明具体的行为，其它字段可以自定义，如果要发起一个 action 需要使用 dispatch 函数；需要注意的是 dispatch 是在组件 connect Models以后，通过 props 传入的。

action这个动作，指的是dispatch这个行为。

1
2
3
dispatch({
  type: 'add',
});

dispatch 函数

1
type dispatch = (a: Action) => Action

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

在 dva 中，connect Model 的组件通过 props 可以访问到 dispatch，可以调用 Model 中的 Reducer 或者 Effects，常见的形式如：

1
2
3
4
dispatch({
  type: 'user/add', // 如果在 model 外调用，需要添加 namespace
  payload: {}, // 需要传递的信息
});

Reducer

1
type Reducer<S, A> = (state: S, action: A) => S

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

Reducer 的概念来自于是函数式编程，很多语言中都有 reduce API。如在 javascript 中：

1
2
3
4
[{x:1},{y:2},{z:3}].reduce(function(prev, next){
    return Object.assign(prev, next);
})
//return {x:1, y:2, z:3}

在 dva 中，reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值，与当前 reducers 中的值进行运算获得新的值（也就是新的 state）。需要注意的是 Reducer 必须是纯函数，所以同样的输入必然得到同样的输出，它们不应该产生任何副作用。并且，每一次的计算都应该使用immutable data，这种特性简单理解就是每次操作都是返回一个全新的数据（独立，纯净），所以热重载和时间旅行这些功能才能够使用。

Effect

Effect 被称为副作用，在我们的应用中，最常见的就是异步操作。它来自于函数编程的概念，之所以叫副作用是因为它使得我们的函数变得不纯，同样的输入不一定获得同样的输出。

dva 为了控制副作用的操作，底层引入了redux-sagas做异步流程控制，由于采用了generator的相关概念，所以将异步转成同步写法，从而将effects转为纯函数。至于为什么我们这么纠结于 纯函数，如果你想了解更多可以阅读Mostly adequate guide to FP，或者它的中文译本JS函数式编程指南。

Subscription

Subscriptions 是一种从 源 获取数据的方法，它来自于 elm。

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

1
2
3
4
5
6
7
8
9
10
import key from 'keymaster';
...
app.model({
  namespace: 'count',
  subscriptions: {
    keyEvent({dispatch}) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  }
});

dva数据同步处理

以上的api清楚了以后，我们来模拟一下dva中的状态同步管理，下面是这样一个场景，底部栏tabbar在首页正常显示，当在首页点击电影详情的时候，进入详情页面，从而隐藏底部栏tabbar。

1.在index.js中，注册model

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import dva from 'dva';
import './index.css';

// 1. Initialize
const app = dva({
  history:require("history").createBrowserHistory()
});

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

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

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

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

2.在models目录下创建对应的maizuo.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export default {
  // 当前模型的命名空间，以后出现不同业务域都要有对应的命名空间来进行区分
  namespace: 'maizuo',

  state: {
    // isShow 即为tabbar是否显示的状态
    isShow:true,
  },

  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line
    },
  },
  //  同步
  reducers: {
    hide(prevState,action){
      return {...prevState,isShow: false}
    },
    show(prevState,action){
      return {...prevState,isShow: true}
    }
  }
};

3.此时考虑到在进入详情页的时候来对tabbar进行控制，那么需要在详情页中派发action

这里需要注意：dispatch方法需要经过connect高阶函数封装过的才可以获取。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, {Component} from 'react';
import {connect} from "dva";

class Detail extends Component {
  componentDidMount() {
	// 挂载组件时将tabbar隐藏
    this.props.dispatch({
      type:"maizuo/hide"
    })
  }
  // 组件销毁时，将tabbar显示
  componentWillUnmount() {
    this.props.dispatch({
      type:"maizuo/show"
    })
  }

  render() {
    return (
      <div>
        Detail
      </div>
    );
  }
}

export default connect()(Detail);

4.经过dispatch派发后的action，需要在model的reducer中进行处理，详细处理见上面第二步骤。

这里需要注意：reducer是一个纯函数，不能直接对状态进行修改，需要将原始状态进行深拷贝一份，再做处理

dva数据异步处理

异步处理，主要用到了model中的effect副作用函数，该方法主要封装了redux-saga，需要使用生成器函数。

下面是这样一个应用场景：从卖座网获取所有电影院数据，点击影院的时候，第一次正常请求接口获取数据，为异步请求，当第二次点击的时候，是通过状态的缓存中 进行获取数据，不在发送网络请求。

1.在models/maizuo.js 模型中，注册存储影院数据的状态：list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import {getCinemaListService} from "../services/maizuo";

export default {

  namespace: 'maizuo',

  state: {
    isShow:true,
    // 创建异步数据list
    list:[] 
  },

  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line

    },
  }
  //  同步
  reducers: {
    hide(prevState,action){
      return {...prevState,isShow: false}
    },
    show(prevState,action){
      return {...prevState,isShow: true}
    }
  }
};

1.首先在services中创建maizuo.js 来封装跟卖座相关的所有数据请求逻辑

1
2
3
4
5
6
7
8
9
10
11
import request from "../utils/request";


export function getCinemaListService() {
  return request('https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=878555',{
    headers: {
      'X-Client-Info': '{"a": "3000", "ch": "1002", "v": "5.2.0", "e": "1646462402616989231939585"}',
      'X-Host': 'mall.film-ticket.cinema.list'
    }
  })
}

2.点击影院按钮，因此在Cinema组件中进行派发action。派发action之前，我们需要先判断当前状态中是否已经存在数据，因此，我们需要从model中获取state。

这里注意：当要从模型中获取状态数据的时候，依然需要通过connect组件的封装才可以获取，获取到的状态数据，通过return，会自动挂载到了props上，通过this.props.list即可获取。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, {Component} from 'react';
import {connect} from "dva";

class Cinema extends Component {
  componentDidMount() {
    if (this.props.list.length === 0){
      this.props.dispatch({
        type:"maizuo/getCinemaList"
      })
    }else {
      console.log("缓存",this.props.list)
    }
  }

  render() {
    return (
      <div>
        <ul>
          {
            this.props.list.map(item => <li key={item.cinemaId}>
              {item.name}
            </li>)
          }
        </ul>
      </div>
    );
  }
}
// 通过connect高阶组件获取state，并挂载到props中
export default connect((state) => {
  return {
    list:state.maizuo.list
  }
})(Cinema);

3.在模型中通过effects方法，来进行异步的处理

这里注意：当通过effect副作用处理过后，需要转为同步的reducer，这样才可以继续处理下去。（这里是因为封装了redux-saga，详细原理可以去看我写的关于redux-saga的博客）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import {getCinemaListService} from "../services/maizuo";

export default {

  namespace: 'maizuo',

  state: {
    isShow:true,
    list:[]
  },

  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line

    },
  },
  //  异步
  // 这里的call方法是用来处理异步的，而put方法是在派发action，这样在reducer中就变成了同步的处理
  effects: {
    *getCinemaList(action,{call,put}){
      var res = yield call(getCinemaListService)
      console.log(res.data.data.cinemas);
      yield put({
        type:"changeCinemaList",
        payload:res.data.data.cinemas
      })
    }
  },
  //  同步
  reducers: {
    hide(prevState,action){
      return {...prevState,isShow: false}
    },
    show(prevState,action){
      return {...prevState,isShow: true}
    },
    // 将异步变成同步后的数据处理
    changeCinemaList(prevState,action){
      return {...prevState,list:action.payload}
    }
  },

};

dva跨域反向代理

与react脚手架无异，dva也是借用了http-proxy-middleware模块来实现的，只是做了一层封装，配置文件不同而已。

这里需要在 .webpackrc文件中进行配置，配置如下：

1
2
3
4
5
6
7
8
{
  "proxy":{
    "/api":{
      "target":"https://i.maoyan.com",
      "changeOrigin":true
    }
  }
}

无需重启服务，及其简单。

dva mock模块应用

mock接口测试，在没有后端真正接口的时候，前端自己进行测试的神器。

1.首先在mock目录下创建api.js(名字自己随意)

这里我只做了GET、POST的模拟接口。及供参考

1
2
3
4
5
6
7
8
export default {
  'GET /users':{name:'sola',location:'shenayng'},
  'POST /users/login':(req,res) => {
    res.send({
      ok:1
    })
  }
}

2.在.roadhogrc.mock.js中注册使用即可

1
2
3
4
const mockObj = require('./mock/api')
export default {
  ...mockObj
};

以上即为dva的基本使用，以及在实战中的一些常用的API，但是目前很少会有直接使用dva框架的，一般都会结合到umi框架里使用。在后续的文章里，我会依次介绍到。