本教程案例github：https://github.com/axel10/dva_demo-Counter-and-list/tree/master
这次主要通过在线获取用户数据并且渲染成列表这个案例来演示dva.js。
整个开发流程概括下来应该是：
编写用户列表model（数据模型）-> 编写修改model的方法 -> 编写服务接口 -> 编写组件 -> 将组件与dva.js连接 -> 将dva.js提供的接口（dispatch）和数据模型通过props传入组件 -> 渲染。
我们先从第一步开始。
编写用户列表model及修改方法：（src/models）
import * as userService from ‘../services/userService‘export default { ?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";export function fatchData() { ?return request("/api/users") ?}export function fetchRemoveItem(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 ( ?????<ListBody {...this.props} /> ?????//将自身的props传给子组件。连接之后的组件可以拥有dispatch、索引后的数据模型。 ???) ?}}function mapStateToProps(state) { ?????//将数据模型索引到props。 ?return {users:state.users}}export default 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(<li key={index} onClick={that.removeUserItem.bind(that,item)}>{item.name}</li>) ?????}) ???}return( ?????<div> ???????<h2>请尝试点击条目。</h2> ???????{userList} ?????</div> ???) ?}}export default ListBody;完毕后添加路由。
import React from ‘react‘;import { Router, Route, Switch,Redirect ?} from ‘dva/router‘;import list from ‘./routes/list‘function RouterConfig({ history }) { ?return ( ???<Router history={history}> ?????<Switch> ???????<Route path="/list" exact component={list} /> ???????<Redirect to="/list"/> ?????</Switch> ???</Router> ?);}export default RouterConfig;dva.js 用法详解：列表展示
原文地址：https://www.cnblogs.com/axel10/p/8548305.html