dva的用法_dva.js 用法详解：列表展示

这次主要通过在线获取用户数据并且渲染成列表这个案例来演示dva.js。

整个开发流程概括下来应该是：

编写用户列表model(数据模型)->  编写修改model的方法 -> 编写服务接口 ->  编写组件 ->  将组件与dva.js连接 -> 将dva.js提供的接口(dispatch)和数据模型通过props传入组件 -> 渲染。

我们先从第一步开始。

编写用户列表model及修改方法：(src/models/users.js)

import * as userService from '../services/userService'exportdefault{

namespace:"users",

state: {

list:[]

},

reducers: {//用来修改数据模型的state。

save(state, {payload:{data}}) { //涉及到es6的拆包写法。

state.list =data;return{...state}

},

removeItem(state, {item}) {

state.list= state.list.filter(function(lItem) {return item.id !==lItem.id

});return{...state}

}

},

effects: {//effects指的是涉及到异步请求的方法。通常用来调用服务获取数据。这里要注意如果effects的方法名与reducers中存在重复的话容易造成死循环。

*fetch(payload,{put, call}) {

const data=yield call(userService.fatchData);

yield put({type:"save", payload: data})

},*fetchRemoveItem({item},{put,call}){

const result=yield call(userService.fetchRemoveItem,item.id);if(result){

console.log(true);

yield put({type:"removeItem",item})

}else{

console.log(false);

}

}

},

subscriptions: {//触发器。setup表示初始化即调用。其他用法见官方文档。https://github.com/sorrycc/blog/issues/62

setup({dispatch}) {

dispatch({type:'fetch'})

}

}

}

编写完毕后不要忘了在src/index.js中注册数据模型：

app.model(require('./models/users').default);

编写服务接口：(src/services/userService.js)

import request from "../utils/request";

exportfunctionfatchData() {return request("/api/users")

}

exportfunctionfetchRemoveItem(query) {

console.log(query);return true}

这里涉及到mock数据。方法为修改根目录下的.webpackrc文件：

{"proxy": {"/api": {"target": "http://jsonplaceholder.typicode.com/","changeOrigin": true,"pathRewrite": {"^/api": ""}

}

}

}

接下来编写组件：

先从路由组件开始：

import {connect} from 'dva'import ListBody from"../components/ListBody"import React from"react";

class List extends React.Component {

render() {return( //将自身的props传给子组件。连接之后的组件可以拥有dispatch、索引后的数据模型。

)

}

}function mapStateToProps(state) { //将数据模型索引到props。

return{users:state.users}

}

exportdefault connect(mapStateToProps)(List) //将组件与数据模型相连接。

这里要重点说明：dispatch就是在connect的时候传入的，用来做组件与数据模型之间的交互。

之后是ListBody组件：

import React from 'react';

import {Link} from'dva/router'class ListBody extends React.Component{removeUserItem(item){this.props.dispatch({type:"users/fetchRemoveItem",item}) //通过props获取dispatch方法，users表示数据模型(namespace)，fetchRemoveItem表示reducers或者effects。

}

render(){

const that= this;let userList=[];

let userData= this.props.users.list; //users：数据模型，list：数据模型中的stateif (userData.length>=1){

userData.forEach(function(item, index) {

userList.push(

})

}return(

)

}

}

exportdefault ListBody;

完毕后添加路由。

import React from 'react';

import { Router, Route, Switch,Redirect } from'dva/router';import list from'./routes/list'

functionRouterConfig({ history }) {return(

);

}

exportdefault RouterConfig;