這次主要通過在線獲取用戶數據并且渲染成列表這個案例來演示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(

{item.name})

})

}return(

請嘗試點擊條目。

{userList}

)

}

}

exportdefault ListBody;

完畢后添加路由。

import React from 'react';

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

functionRouterConfig({ history }) {return(

);

}

exportdefault RouterConfig;

總結

以上是生活随笔為你收集整理的dva的用法_dva.js 用法详解：列表展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。